js窗口交互

最新推荐文章于 2022-02-08 14:06:59 发布

molaifeng

最新推荐文章于 2022-02-08 14:06:59 发布

阅读量835

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/molaifeng/article/details/9730165

版权

Javascript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

最近项目中需要用到iframe来实现业务逻辑的展现，还好之前看过相关的子父页面交互的资料，经过一段时间的代码实战，总算是把这一需求完成了。今天就把这期间碰到的技术点给罗列出来，相当于总结一下吧，也算是巩固下，若是对众位看官有益，那就再好不过了。

众所周知在页面内引入iframe标签，相当于嵌套了内联框架，通过其属性src引入文档。文档内有个contentWindow属性，引用该窗体的window对象。

具体示例如下：

outer.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
function ch(o) {
    document.getElementById('res').contentWindow.chk(o);
}
</script>

<style type="text/css">
</style>
</head>
    <body>
        <iframe id="res" src="inner.html"></iframe>
        <input type="button" value="Click Me" name="outer" οnclick="ch(this);"/>
    </body>
</html>

inner.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
    function chk(o) {
        console.log(o.name);
    }
</script>

<style type="text/css">
</style>
</head>
    <body>
        我是嵌套的
        <input type="button" value="Click Me" οnclick="chk();"/>
    </body>
</html>

看了两个页面后，应该知道，outer.html是父页面，inner.html为子页面，单击父页面的按钮，把该按钮的this传给子页面，单击子页面的按钮，在控制台上显示‘outer’，也就是说父页面通过contentWindow把一个对象传给了子页面。

接下来就看看子页面如何传对象给父页面。

outer.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
function ch(obj) {
    alert(obj.value);
}
</script>

<style type="text/css">
</style>
</head>
    <body>
        <iframe id="res" src="inner.html"></iframe>
    </body>
</html>

inner.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
    function chk(obj) {
        window.parent.ch(obj);
    }
</script>

<style type="text/css">
</style>
</head>
    <body>
        我是嵌套的
        <input type="button" value="子页面传对象给父页面" οnclick="chk(this);"/>
    </body>
</html>

通过代码观察或是测试下，可以发现，单击子页面的按钮会触发父页面的ch方法，弹出子页面的input的value值，这里主要是利用了js的window.parent属性，意思是得到该子页面的父页面，当然了也可以使用window.top属性，前者是在只有两个层级的嵌套页面的情况下，后者是不管有多少个层级嵌套，都会找到最顶层的页面。

上面若是用jquery来写的话，还需告知一个小的知识点，DOM对象和jquery对象的相互转换。如

var jqueryObject = $('#res'); // jquery对象
var domObject = jqueryObject[0] // DOM对象

大家看了后或许会有个疑问，为什么jqueryObject[0]会转成DOM对象，这里只需在控制台看看两个对象里面包含的元素即可

通过上图观察可知，jquery对象包含了DOM对象，其属性0即为DOM对象。那么，DOM对象如何转换为jquery对象呢
，通过jqeury的get方法获取

var jqueryObject = $('#res');                // jquery对象
var domObject = jqueryObject.get[0]              // DOM对象

有兴趣的或是喜欢追根求底的朋友可以看看jquery中的get方法的实现，这里我简单的说下

jQuery.fn = jQuery.prototype = {
    // Get the Nth element in the matched element set OR
    // Get the whole matched element set as a clean array
    get: function( num ) {
		return num === undefined ?

			// Return a 'clean' array
			Array.prototype.slice.call( this ) :

			// Return just the object
			this[ num ];
	},
}

这里我把jquery对象的原型上其他方法给去掉了，通过观察，可以找到此get方法是写在jquery对象的原型上的，因此调用时只需是jquery对象即可，这里再说下，$.get是jquery扩展的方法，作用是ajax的get形式。如果get方法不传参数，那么会返回一个数组，如果传了个类型为number的参数那么就返回个对象。

当然了，如果要把DOM对象转为jquery对象，只需写成

var obj = document.getElementById('res');
console.log(obj);
console.log($(obj));

再看看控制台打印的内容，

看了上图，是否觉得很熟悉，对，就是一开始的那张图，只是顺序不同。
好了，预备知识说完了，那么一开始的例子改成jquery写法就很简单了

<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
function ch(o) {
    $('#res')[0].contentWindow.chk(o);
}
</script>

最后再看看下面的实例

outer.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(function () {
    $('.btn').live('click', function () {
        alert('我是父页面的元素');
    })
})
</script>

<style type="text/css">
</style>
</head>
    <body>
        <iframe id="res" src="inner.html"></iframe>
        <input type="button" value="Click Me" name="outer" class="btn"/>
    </body>
</html>

inner.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
    function chk(o) {
        $('.btn', window.parent.document).click();
    }
</script>


<style type="text/css">
</style>
</head>
    <body>
        我是嵌套的
        <input type="button" value="调用父页面的元素" οnclick="chk();"/>
    </body>
</html>

相信看了示例中的代码后，大家都知道，单击子页面inner.html按钮会调用父页面outer.html中的btn方法，弹出‘我是父页面的元素’。对，这就是子页面通过jquery调用父页面的方法。

最后的最后，这里的例子都是在同域下测试的，要跨域的下，浏览器会因为同源策略的限制而不成功的。