子頁面呼叫父頁面中的dom元素並回傳資訊
阿新 • • 發佈：2018-12-26
當我們在多個頁面間做互動時免不了要進行頁面間的傳值問題,比如說下面就是這個的一個簡單的例子.
在這裡我們採用的是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頁面:
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> <!-- 在這裡新增jquery的js包檔案 --> <script src="../../js/jquery-3.2.0.js" type="text/jscript"></script> </head> <div id="divId">這是父頁面</div><br /> <input id="inputId"/> <button onclick="toChildren()" >跳轉到子頁面</button> <body> <script type="text/javascript"> function toChildren(){ window.open('children.html','新視窗','width=300,height=150'); } </script> </body> </html>
<!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 onclick="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>