在demo中操作iframe&在iframe中操作demo中的元素

最新推荐文章于 2023-03-31 19:31:00 发布

ld513508088

最新推荐文章于 2023-03-31 19:31:00 发布

阅读量596

点赞数

分类专栏： javaScript 文章标签： iframe xhtml function input html 文档

本文链接：https://blog.csdn.net/ld513508088/article/details/8046157

版权

javaScript 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

js操控iframe:
contentWindow：iframe的window对象
contentDocument：iframe的document对象
1、例子：在页面中操作iframe中的元素
demo1.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-

8" />
<title>无标题文档</title>
<script>

window.onload = function(){
var oInput = document.getElementById('input1');
var oIframe = document.getElementById('iframe1');

oInput.onclick = function(){
//oIframe.contentWindow.document.getElementById

('div1').style.color = 'red'; //所有浏览器都是支持的
};
};

</script>
</head>

<body>
<input type="button" value="改变" id="input1" />
<iframe src="iframe1.html" id="iframe1"></iframe>
</body>
</html>
iframe1.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-

8" />
<title>无标题文档</title>
</head>

<body>
<div id="div1">aaaaa</div>
</body>
</html>
2、在iframe中操作父页面中的元素
window.parent：iframe的父页面窗口
window.top:iframe的最顶层页面窗口
demo2.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-

8" />
<title>无标题文档</title>
</head>

<body>
<div id="div1">aaaaaa</div>
<iframe src="iframe2.html"></iframe>
</body>
</html>
iframe2.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-

8" />
<title>无标题文档</title>
<script>

window.onload = function(){
   var oInput = document.getElementById('input1');

   oInput.onclick = function(){
       //window.parent.document.getElementById

('div1').style.color = 'red';

       window.top.document.getElementById

('div1').style.color = 'red';
   };


};

</script>
</head>

<body>
<input type="button" value="改变" id="input1" />
</body>
</html>

ld513508088

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在demo中操作iframe&在iframe中操作demo中的元素

js操控iframe:contentWindow：iframe的window对象contentDocument：iframe的document对象1、例子：在页面中操作iframe中的元素demo1.html:"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">8" />无标题文档
复制链接

扫一扫

专栏目录