javascript瀏覽器窗口之間傳遞數(shù)據(jù)的方法
更新時間：2015年01月20日 11:17:29 投稿：shichen2014
這篇文章主要介紹了javascript瀏覽器窗口之間傳遞數(shù)據(jù)的方法,實例分析了父窗口與子窗口之間傳遞參數(shù)的使用技巧,非常具有實用價值,需要的朋友可以參考下
本文實例講述了javascript瀏覽器窗口之間傳遞數(shù)據(jù)的方法。分享給大家供大家參考。具體分析如下：
摘要：
在項目開發(fā)中我們經(jīng)常會遇到彈窗，有的是通過div模擬彈窗效果，有的是通過iframe，也有通過window自帶的open函數(shù)打開一個新的窗口。今天給大家分享的是最后一種通過window.open()函數(shù)打開頁面進行數(shù)據(jù)交互。首先看下效果圖：
原理：
父窗口給子窗口傳遞數(shù)據(jù)是通過url的參數(shù)傳遞過去，子窗口給父窗口傳遞數(shù)據(jù)是通過父窗口的全局函數(shù)傳遞。
代碼：
index.html如下：
復制代碼 代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="content"></div>
<button id="test">按鈕</button>
<script>
var test = document.getElementById('test');
test.onclick = function() {
window.open('./window.html?param1=name¶m2=password', '_blank','width=960,height=650,menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=yes');
};
window.getContent = function(tx) {
document.getElementById('content').innerText = tx;
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="content"></div>
<button id="test">按鈕</button>
<script>
var test = document.getElementById('test');
test.onclick = function() {
window.open('./window.html?param1=name¶m2=password', '_blank','width=960,height=650,menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=yes');
};
window.getContent = function(tx) {
document.getElementById('content').innerText = tx;
}
</script>
</body>
</html>
window.html如下：
復制代碼 代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="content"></div>
<select name="" id="city">
<option value="shanghai">上海</option>
<option value="hangzhou">杭州</option>
</select>
<script>
var params = location.href.substring(location.href.lastIndexOf('?')+1).split('&');
document.getElementById('content').innerText = params;
var city = document.getElementById('city');
city.onchange = function() {
window.opener.getContent(city.value);
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="content"></div>
<select name="" id="city">
<option value="shanghai">上海</option>
<option value="hangzhou">杭州</option>
</select>
<script>
var params = location.href.substring(location.href.lastIndexOf('?')+1).split('&');
document.getElementById('content').innerText = params;
var city = document.getElementById('city');
city.onchange = function() {
window.opener.getContent(city.value);
}
</script>
</body>
</html>
注意：這里需要有服務環(huán)境運行
希望本文所述對大家的javascript程序設計有所幫助。
相關文章
這篇文章主要介紹了JS正則驗證郵箱的格式。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要介紹了鼠標懸浮停留三秒后顯示大圖，在網(wǎng)頁中還是比較實用的，下面是示例代碼2014-09-09
echartjs實現(xiàn)cross十星輔助線實現(xiàn)示例詳解
這篇文章主要為大家介紹了echartjs實現(xiàn)cross十星輔助線實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
JavaScript實現(xiàn)輪播圖方法(邏輯清晰一看就懂)
這篇文章主要給大家介紹了關于JavaScript實現(xiàn)輪播圖方法的相關資料,JS輪播圖的實現(xiàn)核心是使用JavaScript來控制圖片的切換和顯示,配合HTML和CSS完成布局和樣式設置,文中介紹的方法邏輯清晰一看就懂,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了微信小程序填寫用戶頭像和昵稱實現(xiàn)方法，我們使用小程序往往能碰到提示允許獲取用戶頭像昵稱，這種功能怎么實現(xiàn)呢？本篇文章帶你探索2023-02-02
我們常見的手機通訊錄或微信通訊錄，聯(lián)系人信息是按字母順序排列的列表，通過點擊右側的字母，會迅速定位檢索到首字母對應的聯(lián)系人。下面通過本文給大家分享JS實現(xiàn)移動端按首字母檢索城市列表功能，需要的的朋友參考下吧2017-07-07
js通過元素class名字獲取元素集合的具體實現(xiàn)
獲取元素集合的方法有很多，接下來為大家介紹喜愛使用js通過元素class名字獲取元素集合的方法2014-01-01
這篇文章主要為大家詳細介紹了js面向對象方式實現(xiàn)拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
JS實現(xiàn)頁面長時間不操作退出到登錄頁面的示例代碼
這篇文章主要介紹了JS實現(xiàn)頁面長時間不操作退出到登錄頁面的示例代碼,通過在head標簽中引入jquey和頁面長時間不操作的js頁面,結合實例代碼講解的非常詳細,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了如何利用HTML+CSS+JavaScript制作一個花里胡哨的點擊按鈕。文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下2022-03-03