Html页面与页面间的交互

来源：互联网发布：手机淘宝账号怎么申请编辑：程序博客网时间：2024/05/17 08:31

分别为：`window.parent` 与 `window.opener`两者

简单介绍：

1、`window.opener` 是 `window.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地址：这里写链接内容

阅读全文

0 0

Html页面与页面间的交互

分别为：window.parent 与 window.opener两者

简单介绍：

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

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

分别为：`window.parent` 与 `window.opener`两者

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