JavaScript_javascript 기술로 iframe을 부분적으로 새로 고치는 여러 방법 요약
- WBOY원래의
- 2016-05-16 15:21:331649검색
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>
설명: ff9c23ada1bcecdd1a0fb5d5a0f18437에는 3499910bf9dac5ae3c52d5ede7383485와 동일한 효과가 있는 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을 부분적으로 새로 고치는 여러 가지 방법을 요약한 것입니다. 필요에 따라 적합한 방법을 선택하시기 바랍니다. 감사합니다!