通过js或jQuery,<iframe>子父窗口之间元素、方法、window的相互获取

最新推荐文章于 2024-02-26 16:36:39 发布

霜月枫桥

最新推荐文章于 2024-02-26 16:36:39 发布

阅读量2.7w

点赞数 1

分类专栏： JavaScript学习随笔

本文链接：https://blog.csdn.net/MOONCOM/article/details/53130756

版权

JavaScript学习随笔专栏收录该内容

55 篇文章 0 订阅

订阅专栏

条件：以下支持火狐浏览器，若在谷歌浏览器中使用，子窗口需要配置父窗口的跨域。

1、js在子窗口获取父窗口的window

window.parent

//此时可以调用父窗口的window方法，比如获取父窗口的高度window.parent.innerHeight，宽度window.parent.innerWidth，移动父窗口的位置等，具体的可以看本人博客的《获取浏览器窗口的尺寸及对浏览器窗口的一些操作》篇。

2、js在父窗口获取子窗口的window

$("#testiframe")[0].contentWindow==document.getElementById("testiframe").contentWindow==window.frames[0]

以上三种都可以获取子窗口的window,上面三种对应的<body>如下所示：

</div>

3、jquery在iframe子页面获取父页面元素代码如下:

$("#objid",parent.document);

4、jquery在父页面获取iframe子页面的元素
代码如下:

$("#objid",document.frames('iframename').document)

5、js在iframe子页面获取父页面元素代码如下:

window.parent.document.getElementById("元素id");

6、js在父页面获取iframe子页面元素代码如下:

window.frames["iframe_ID"].document.getElementByIdx_x("元素id");

7、子窗口iframe内调用父窗口函数：

parent.func();

//前提是父窗口的js中必须有func()这个方法。

8、父窗口中调用子窗口函数

document.getElementById(子窗口 ifram 元素的ID值).contentWindow.子窗口中的方法()

子窗口 ifram 元素的name值.window.子窗口中的方法()

下面是我写的一个demo，大家在测试示例时，注意要在火狐浏览器下测试，原因请看本文的开头

父窗口页面 outter.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <title>Document</title>
    <script>
        function outter(){
            alert("这是父窗口中的方法");
        }
        function parent(){
            //Name.window.inner();          //第一种方法
            document.getElementById("ID").contentWindow.inner();
        }
    </script>
    
</head>
<body>
    <iframe src="inner.html" frameborder="1" id="ID" name="Name"></iframe>
    <hr>
    这是父窗口页面
    <br>
    <input type="button" value="点击调用子窗口的方法" id="but1" οnclick="parent()"><br>
</body>
</html>

子窗口页面 inner.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
	function inner(){
		alert("这是子窗口中的方法");
	}
	function child(){
		window.parent.outter();                 
	}
	</script>
</head>
<body>
	这是子窗口页面
	<br>
	<input type="button" value="点击调用父窗口的方法" class="but2" οnclick="child()">
</body>
</html>

霜月枫桥

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
通过js或jQuery,<iframe>子父窗口之间元素、方法、window的相互获取

1、js在子窗口获取父窗口的windowwindow.parent//此时可以调用父窗口的window方法，比如获取父窗口的高度window.parent.innerHeight，宽度window.parent.innerWidth，移动父窗口的位置等，具体的可以看本人博客的《获取浏览器窗口的尺寸及对浏览器窗口的一些操作》篇。2、js在父窗口获取子窗口的window$("#
复制链接

扫一扫