简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

JavaScript_javascript 기술로 iframe을 부분적으로 새로 고치는 여러 방법 요약

WBOY
풀어 주다： 2016-05-16 15:21:33
원래의
1598명이 탐색했습니다.

Iframe은 웹페이지에 삽입된 프레임 형태입니다. 웹페이지는 삽입된 부분을 변경하여 콘텐츠의 일부를 새로 고칠 수 있습니다.

Iframe의 사용법은 일반 태그 요소 DIV와 유사하며 페이지에 삽입할 위치, 색상, 인터페이스 레이아웃 등을 지정할 수 있습니다

1. iframe 부분 새로 고침을 구현하는 방법 1

<script type="text/javascript">
 $(function(){
 $("#a1").click(function(){
  var name= $(this).attr("name");
  $("#iframe").attr("src",name).ready();
 })
 $("#a2").click(function(){
  var name= $(this).attr("name");
  $("#iframe").attr("src",name).ready();
 })
})
</script>
<a href="#" id="a1" name="a1.html">1</a>
<a href="#" id="a2" name="a2.html">2</a>
<iframe src="" id="iframe"></iframe>
로그인 후 복사

a1을 클릭하면 a1.html의 내용이 iframe에 표시됩니다. a2를 클릭하면 a2.html의 내용이 iframe에 표시됩니다

2. iframe 부분 새로 고침 구현 방법 2 

<a href="a1.html" id="a1" name="a1.html" target="i">1</a>
<a href="a2.html" id="a2" name="a2.html" target="i">2</a>
<iframe src="" id="iframe" name="i"></iframe>
로그인 후 복사

설명:

에는 와 동일한 효과가 있는 target 속성도 있습니다. a1.html로 Action에 req.set이나 session.set이 있으면 iframe에도 표시할 수 있습니다.

3: iframe이 부분 새로 고침을 달성하는 방법 3:

<iframe src="1.htm" name="ifrmname" 
id="ifrmid"></iframe>
로그인 후 복사

옵션 1: iframe의 이름 속성을 사용하여

찾기 
<input type="button" name="Button" value="Button" onclick="document.frames('ifrmname').location.reload()">
로그인 후 복사

또는 

<input type="button" name="Button" value="Button" onclick="document.all.ifrmname.document.location.reload()">
로그인 후 복사

옵션 2: iframe의 id 속성을 사용하여

찾기 
<input type="button" name="Button" value="Button" onclick="ifrmid.window.location.reload()">
로그인 후 복사

옵션 3: iframe의 src가 다른 웹사이트 주소인 경우(크로스도메인 운영 시) 

<input type="button" name="Button" value="Button" onclick="window.open(document.all.ifrmname.src,'ifrmname','')">
로그인 후 복사

옵션 4: iframe의 src를

으로 대체하여 부분 새로 고침 달성

document.getElementById("iframname").src=""를 사용하여 iframe을 리디렉션할 수 있습니다.

샘플 코드는 다음과 같습니다. test.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <script type="text/javascript">
  function partRefresh() {
   document.getElementById("iframe1Id").src = "a2.html"; // 方法一: 通过和替换iframe的src来实现局部刷新
  }
 </script>
 </head>
 <body>
  <table border="1" width="90%" align="center">
   <tr
    style="background: #F0F0E4"><td>方格1</td><td>方格2</td> <td>方格3</td>
   </tr>
   <tr>
    <td>
     <iframe src="a1.html" id="iframe1Id" name="iframe1Name" width="100%"></iframe>
    </td>
    <td>
     <iframe src="a2.html" id="iframe2Id" name="iframe2Name" width="100%"></iframe>
    </td>
    <td>
     <iframe src="a3.html" id="iframe3Id" name="iframe3Name" width="100%"></iframe>
    </td>
   </tr>
  </table>
  <br>
  <br>
  <input type="button" value="IFRAME局部刷新" style="margin-left: 70px;" onclick="partRefresh();">
 </body>
</html>
로그인 후 복사

위 내용은 JavaScript에서 iframe을 부분적으로 새로 고치는 여러 가지 방법을 요약한 것입니다. 필요에 따라 적합한 방법을 선택하시기 바랍니다. 감사합니다!

관련 라벨：
iframe
원천：php.cn
이전 기사：이것, 이것, 이것에 대해 다시 javascript로 논의하십시오. 초 포괄적 (클래식)_javascript 기술 다음 기사：현재 page_javascript 기술을 열 브라우저를 결정하는 js 메소드
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
VueJS 스케줄링 기능의 실행 순서로 인해 문제가 발생함 공지 사항 목록(API에서 검색)을 페이지에 표시하려고 합니다. 저는 Vuex 스토어를 사용하고 있으며 Announcements라는 상태가 있습니다. 또한 사용자...
에서 2024-04-06 10:37:58
0
1
385
강제 새로 고침은 Next.js에서 정의되지 않은 경로 또는 오류 페이지에 액세스한 결과입니다. 정의되지 않은 경로 또는 오류 페이지에 액세스하면 Next.js가 강제 새로 고침을 수행하여 내 컨텍스트가 기본 상태로 돌아가게 됩니다(즉, userProfile...
에서 2024-04-05 08:32:46
0
1
400
CSS에서 눈금선을 표시할 수 있나요? CSS 그리드 레이아웃을 배우기 시작했습니다. 이상적인 세계에서는 여러 개의 그리드 상자가 있는 div를 설정하고 그 안에 요소를 정확하게 배치하여 필요할 때 오...
에서 2024-03-31 20:38:21
0
2
395
Refine 프로젝트에서 Inferencer가 자동으로 생성한 코드를 삭제하는 방법은 무엇입니까? 왜냐하면 나는 Fine.dev를 처음 접하기 때문입니다. 그래서 제거해야 할 특정 코드 스나이핑을 표시하는 이 부분만 제거하고 싶습니다. Aslo는 파일 구조와 ...
에서 2024-03-30 18:43:48
0
1
345
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！