검색결과 리스트
글
1. 부모 페이지에서 iframe 내부 DOM 셀렉터를 이용하여 엑세스 하기
- 부모페이지(parent.html)
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn_ChangeBackground").bind("click", function () {
$("#iframe").contents().find("#div_child").css("background-color","#ffff00");
});
});
</script>
</head>
<body>
<input id="btn_ChangeBackground" type="button" value=" Iframe 내부 배경 색상 변경" />
<iframe id="iframe" src="child.html" width="500" height="500"></iframe>
</body>
</html>
- 자식 페이지(child.html)
<html>
<head>
</head>
<body>
<div id="div_child" style="width:50px; height:30px">
iframe 내부
</div>
</body>
</html>
2. 자식 페이지에서 부포 페이지에 엑세스 하기
- 부모페이지(parent.html)
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn_ChangeBackground").bind("click", function () {
$("#iframe").contents().find("#div_child").css("background-color","#ffff00");
});
});
</script>
</head>
<body>
<input id="btn_ChangeBackground" type="button" value=" Iframe 내부 배경 색상 변경" />
<iframe id="iframe" src="child.html" width="500" height="500"></iframe>
</body>
</html>
- 자식 페이지(child.html)
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#btn_ParentAccess").bind("click", function() {
$(top.document).find("body").append("<div id=\"div_unable\" style=\"position:absolute;display:block;top:0px;left:0px;background-color:#ffffff;opacity:0.4;filter:alpha(opacity=40);width:100%;height:100%\"></div>");
});
});
</script>
</head>
<body>
<input id="btn_ParentAccess" type="button" value=" 부모 페이지 " />
</body>
</html>
RECENT COMMENT