html中子界面与父界面相互操作或传值
一、在使用iframe的页面,要操作这个iframe里面的DOM元素可以用:
contentWindow、contentDocument(测试的时候chrom浏览器,要在服务器环境下)
contentWindow:非W3C标准,虽然不是标准的一部分,但各个主流浏览器都支持; 返回 frame/iframe 生成的 window 对象。可直接操作子界面中的方法与变量
子界面:
//子界面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>子页面</title> </head> <body> <input type=button value="调用父页面中的parentSay()函数" onclick="callParent()">//点击按钮执行函数 <script type="text/javascript"> var ss = 5;//子界面中的变量 function childSay() { alert("我是子页面的say方法"); } function callParent() { parent.parentSay();//执行父界面中的函数 } </script> </body> </html>
父界面:
//父界面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>父页面</title> </head> <body> <input type=button value="调用子页面中的函数childSay函数" onclick="callChild()">//点击按钮执行函数 <iframe id="myFrame" src="four.html"></iframe> <script type="text/javascript"> function parentSay() { alert("我是父页面中的方法"); } function callChild() { var child = document.getElementById("myFrame").contentWindow;//获取id为myFrame的iframe的对象 child.childSay();//执行子界面中的函数 alert(child.ss);//获取子界面的变量自己用 } </script> </body> </html>
1.先获取iframe里面的window对象,再通过这个对象,获取到里面的DOM元素
例子:
var ifr = document.getElementById("iframe"); ifr.contentWindow.document.getElementById("XXXXX") <iframe src="a.html" id=""></iframe>
ifr.contentWindow 这里,返回的是iframe的window对象,所以后面可以接着调用document方法,再接着调用getElementByTagName。那么就可以对iframe里面的元素进行操作了。
二、在iframe本页面,要操作这个iframe的父页面的DOM元素(即嵌套这个iframe的页面)可以用:
window.parent、window.top(这里的TOP是获取的顶层,即有多层嵌套iframe的时候使用)
var ifr = document.getElementByTagName("iframe"); ifr.parent.document.getElementById("XXXXX") <iframe src="a.html" id=""></iframe>
1、在父页面 获取iframe子页面的元素
(在同域的情况下 且在http://下测试,且最好在iframe onload加载完毕后 dosomething...)
js写法
a、通过contentWindow获取
也有用contentDocument 获取的 但是contentWindow 兼容各个浏览器,可取得子窗口的 window 对象。
contentDocument Firefox 支持,> ie8 的ie支持。可取得子窗口的 document 对象。
获取方法
- var frameWin=document.getElementById('iframe').contentWindow; //window对象
- var frameDoc=document.getElementById('iframeId').contentWindow.document //document对象
- var frameBody=document.getElementById('iframeId').contentWindow.document.body //body对象
还有iframe.contentDocument 方法 //但是ie 6,7不支持
b、通过frames[]数组获取
(但是必须在ifram框架加载完毕后获取,iframe1是iframe的name属性)
- document.getElementById('iframId').onload=function(){
- var html= window.frames["name属性"].document.getElementById('iframe中的元素的id').innerHTML;
- alert(html)
- }
- 如果要获取iframe中的iframe
- document.getElementById('iframId').onload=function(){
- var html= window.frames["name属性"].frames["name属性"].document.getElementById('iframe中的元素的id').innerHTML;
- alert(html)
- }
jq写法:必须在iframe加载完毕以后才有效
- a、$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1 必须在iframe加载完后才有效
- b、$("#iframe中的控件ID",document.frames("frame的name").document)//方法2 <span style="font-family: Arial, Helvetica, sans-serif;">必须在iframe加载完后才有效</span>
=================================
2、在iframe中获取父级页面的id元素
(在同域的情况下且在http://下测试,最好是 iframe记载完毕再dosomething)
js写法:
获取父级中的objid
- var obj=window.parent.document.getElementById('objId')
window.top 方法可以获取父级的父级的....最顶层的元素对象
jq写法:
- $('#父级窗口的objId', window.parent.document).css('height':'height); // window可省略不写
- 或者
- $(window.parent.document).find("#objId").css('height':'height); // window可省略不写
===================================
3、父级窗体访问iframe中的属性
(经测试,在ie中最好用原生的onload事件,如果用jq的load把iframe加载完毕 有时候方法调用不到 多刷新才有效果)
- a、 用contentWindow方法
- document.getElementById('iframe1').onload=function(){
- this.contentWindow.run();
- }
- b、用iframes[]框架集数组方法
- document.getElementById('iframe1').onload=function(){
- frames["iframe1"].run();
- }
===================================
4、在iframe中访问父级窗体的方法和属性 //window 可以不写
- window.parent.attributeName; // 访问属性attributeName是在父级窗口的属性名
- window.parent.Func(); // 访问属性Func()是在父级窗口的方法
5、让iframe自适应高度
- $('#iframeId').load(function() { //方法1
- var iframeHeight = Math.min(iframe.contentWindow.window.document.documentElement.scrollHeight, iframe.contentWindow.window.document.body.scrollHeight);
- var h=$(this).contents().height();
- $(this).height(h+'px');
- });
- $('#iframeId').load(function() { //方法2
- var iframeHeight=$(this).contents().height();
- $(this).height(iframeHeight+'px');
- });
6、iframe的onload的事件,
7、在iframe所引入的网址写入防钓鱼代码
window.top.location.href=window.location.href;
}
8、获取iframe的高度
1.window.self
对当前窗口自身的引用;self,window.self,window三者是等价的
2.window.top
对顶层窗口的引用,如果本身就是顶层窗口,则返回本身
3.window.parent
对父窗口的引用,如果没有父窗口,则返回本身
contentDocument:
W3C的标准告诉我们,可以通过Dom对象的contentDocument属性来返回文档对象。
doc= document.getElementById('J_mainframe' ).contentDocument
IE6,IE7都不支持,IE8开始支持,需要如此访问 document.frames['J_mainframe'].document;
注意:由于安全原因,文档的内容只能通过同一个域名下的另外一个文档访问。
所有主要浏览器都支持 contentDocument 属性
注意:如果指定了 !DOCTYPE, Internet Explorer 8 及更高版本支持 contentDocument 属性,其他IE版本请使用 contentWindow 属性。
contentDocument Firefox 支持,> ie8 的ie支持。可取得子窗口的 document 对象。
例1:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script> function changeStyle(){ var x=document.getElementById("myframe"); var y=(x.contentWindow || x.contentDocument); if (y.document)y=y.document; y.body.style.backgroundColor="#0000ff"; } </script> </head> <body> <iframe id="myframe" src="demo_iframe.htm"> <p>你的浏览器不支持iframes。</p> </iframe> <br><br> <input type="button" onclick="changeStyle()" value="修改背景颜色"> </body> </html>
例2:
<html>
<head>
<script type="text/javascript">
function getText()
{
var x=document.getElementById("frame1").contentDocument;
alert(x.getElementsByTagName("h3")[0].childNodes[0].nodeValue);
}
</script>
</head>
<body>
<iframe src="/example/hdom/frame_a.html" id="frame1" ></iframe>
<br /><br />
<input type="button" onclick="getText()" value="Get text" />
</body>
</html>