Html页面与页面间的交互

2017-10-19 21:27:15来源:CSDN作者:qq_16559905人点击

分享

分别为:window.parentwindow.opener两者


简单介绍:

1、window.openerwindow.open 打开的子页面调用父页面对象

window.opener 只是对弹出窗口的母窗口的一个引用。

比如:a.html中,通过点击按钮等方式window.open出一个新的窗口b.html。那么在b.html中,就可以通过window.opener(省略写为opener)来引用a.html,包括a.html的document等对象,操作a.html的内容。

附上window.opener效果图:

window.opener实现的效果图


a.html的代码:

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>父页面</title>    </head>    <body>        <input type="button" name="button" id="button" value="提交" onclick="open()" />        <input type="text" name="textfield" id="textfield" />    </body>    <script>        function open() {            window.open("b.html");        }    </script></html>

b.html代码:

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>子页面</title>    </head>    <body>        <button onclick="aaa()">更改父页面的文件</button>    </body>    <script>        function aaa() {            /**             * //更改父页面的元素             * window.opener 返回的是创建当前窗口的那个父窗口的引用,比如点击了a.htm上的一个链接而打开了b.htm             */            window.opener.document.getElementById('textfield').value = '123123123';        }    </script></html>

2、window.parent 是iframe页面调用父页面对象

parent表示父窗口,比如一个A页面利用iframe或frame调用B页面,那么A页面所在窗口就是B页面的parent。

a.html的代码:

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>parent测试</title>    </head>    <body>        <form name="form1" id="form1">            <input type="text" name="username" id="username"/>        </form>        <iframe src="b.html" width=100%></iframe>    </body></html>

b.html代码:

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        b页面    </body>    <script>        //如果我们需要在b.html中要对a.html中的username文本框赋值(就如很多上传功能,上传功能页在ifrmae中,上传成功后把上传后的路径放入父页面的文本框中)        window.parent.form1.username.value = "z这里是b页面赋值操作";    </script></html>

gitHub地址:这里写链接内容

微信扫一扫

第七城市微信公众平台