当我们在多个页面间做交互时免不了要进行页面间的传值问题,比如说下面就是这个的一个简单的例子.
在这里我们采用的是HTML DOM中的Browser 对象,该对象为我们提供了DOM Window对象,通过该对象下的open()方法,我们可以打开一个新的页面,该方法的调用语法是这样的:window.open(URL,name,features,replace).
例如:
window.open('children.html','新窗口','width=300,height=150'); 采用上面的方法我们就可以打开一个新的页面,该方法的语法解释如下：
其中我们可以通过"窗口特征（Window Features）"来控制新打开的页面尺寸大小等信息,下面是其详细参数信息:
窗口特征（Window Features）
需要注意的是,该参数其实在很多浏览器中都会出现部分不兼容现象,比如说我实测显示"left=pixels"和"top=pixels"在360浏览器以及火狐浏览器中定位就出现了问题,所以说以上这两个参数还是不建议使用的.
而子页面调用父页面中的方法采用的是"opener",这是window的一个属性,属于"Window 对象属性",其调用的语法是:window.opener,W3C给出的官方定义是这样的:
opener 属性是一个可读可写的属性，可返回对创建该窗口的 Window 对象的引用。 opener 属性非常有用，创建的窗口可以引用创建它的窗口所定义的属性和函数。
下面就是我的父页面弹出子页面,在子页面中通过调用父页面的dom元素来回传信息,完成信息交互的源代码:
father页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>这是父窗口</title> <!-- 在这里添加jquery的js包文件 --> <script src="../../js/jquery-3.2.0.js" type="text/jscript"></script> </head> <div id="divId">这是父页面</div><br /> <input id="inputId"/> <button οnclick="toChildren()" >跳转到子页面</button> <body> <script type="text/javascript"> function toChildren(){ window.open('children.html','新窗口','width=300,height=150'); } </script> </body> </html>children页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>这是子窗口</title> <script src="../../js/jquery-3.2.0.js"></script> </head> <body> <div id="divId">这是子窗口中的信息</div><br /> <button οnclick="toFather()">返回父窗口</button> </body> <script type="text/javascript"> function toFather(){ //子页面获取父页面中的信息。 var divContent=window.opener.document.getElementById('divId').innerHTML; alert(divContent); window.opener.document.getElementById('inputId').value=document.getElementById('divId').innerHTML; window.close(); } </script> </html>
