html中子界面与父界面相互操作或传值

一、在使用iframe的页面，要操作这个iframe里面的DOM元素可以用：

contentWindow、contentDocument(测试的时候chrom浏览器，要在服务器环境下)

　　contentWindow：非W3C标准，虽然不是标准的一部分，但各个主流浏览器都支持；  返回 frame/iframe 生成的 window 对象。可直接操作子界面中的方法与变量

　　子界面：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//子界面
<!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>

　　父界面：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//父界面
<!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的时候使用)

 

?
1
2
3
4
5
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 对象。

获取方法

 
  1. var frameWin=document.getElementById('iframe').contentWindow;    //window对象  
  2. var frameDoc=document.getElementById('iframeId').contentWindow.document  //document对象  
  3. var frameBody=document.getElementById('iframeId').contentWindow.document.body   //body对象  

还有iframe.contentDocument 方法 //但是ie 6,7不支持

 

 

 

b、通过frames[]数组获取

(但是必须在ifram框架加载完毕后获取，iframe1是iframe的name属性)

 

 
  1. document.getElementById('iframId').onload=function(){  
  2.     var html= window.frames["name属性"].document.getElementById('iframe中的元素的id').innerHTML;  
  3.     alert(html)  
  4. }  
  5.  如果要获取iframe中的iframe  
  6. document.getElementById('iframId').onload=function(){  
  7.     var html= window.frames["name属性"].frames["name属性"].document.getElementById('iframe中的元素的id').innerHTML;  
  8.     alert(html)  
  9. }  

jq写法：必须在iframe加载完毕以后才有效

 
  1. a、$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1 必须在iframe加载完后才有效  
  2. 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

 

 
  1. var obj=window.parent.document.getElementById('objId')  

window.top 方法可以获取父级的父级的....最顶层的元素对象

jq写法：

 
  1. $('#父级窗口的objId', window.parent.document).css('height':'height);  // window可省略不写  
  2. 或者  
  3. $(window.parent.document).find("#objId").css('height':'height);   // window可省略不写  

===================================

3、父级窗体访问iframe中的属性  

(经测试，在ie中最好用原生的onload事件，如果用jq的load把iframe加载完毕 有时候方法调用不到 多刷新才有效果）

 

 
  1. a、 用contentWindow方法   
  2. document.getElementById('iframe1').onload=function(){  
  3.          this.contentWindow.run();  
  4.  }  
  5. b、用iframes[]框架集数组方法  
  6. document.getElementById('iframe1').onload=function(){  
  7.          frames["iframe1"].run();  
  8. }  

 

===================================

4、在iframe中访问父级窗体的方法和属性 //window 可以不写

 

 
  1. window.parent.attributeName;  // 访问属性attributeName是在父级窗口的属性名  
  2. window.parent.Func();  // 访问属性Func()是在父级窗口的方法  

 

5、让iframe自适应高度

 
  1. $('#iframeId').load(function() { //方法1  
  2.     var iframeHeight = Math.min(iframe.contentWindow.window.document.documentElement.scrollHeight, iframe.contentWindow.window.document.body.scrollHeight);  
  3.     var h=$(this).contents().height();  
  4.     $(this).height(h+'px');   
  5. });  
  6.   
  7. $('#iframeId').load(function() { //方法2  
  8.     var iframeHeight=$(this).contents().height();  
  9.     $(this).height(iframeHeight+'px');   
  10. });  

6、iframe的onload的事件，

主流浏览器都支持 iframe.onload=function....
在ie下需要用attachEvent绑定事件
 

7、在iframe所引入的网址写入防钓鱼代码

if(window!=window.top){
window.top.location.href=window.location.href;
}
 

8、获取iframe的高度

iframe.contentWindow.document.body.offsetHeight;
 
 

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：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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>

　　

 

posted @   mingruqi  阅读(3209)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库
点击右上角即可分享
微信分享提示