javascript瀏覽器窗口之間傳遞數(shù)據(jù)的方法
本文實(shí)例講述了javascript瀏覽器窗口之間傳遞數(shù)據(jù)的方法。分享給大家供大家參考。具體分析如下：
摘要：
在項(xiàng)目開(kāi)發(fā)中我們經(jīng)常會(huì)遇到彈窗，有的是通過(guò)div模擬彈窗效果，有的是通過(guò)iframe，也有通過(guò)window自帶的open函數(shù)打開(kāi)一個(gè)新的窗口。今天給大家分享的是最后一種通過(guò)window.open()函數(shù)打開(kāi)頁(yè)面進(jìn)行數(shù)據(jù)交互。首先看下效果圖：
原理：
父窗口給子窗口傳遞數(shù)據(jù)是通過(guò)url的參數(shù)傳遞過(guò)去，子窗口給父窗口傳遞數(shù)據(jù)是通過(guò)父窗口的全局函數(shù)傳遞。
代碼：
index.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如下：
<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>
注意：這里需要有服務(wù)環(huán)境運(yùn)行
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要介紹了JS正則驗(yàn)證郵箱的格式。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
鼠標(biāo)懸浮停留三秒后自動(dòng)顯示大圖js代碼
這篇文章主要介紹了鼠標(biāo)懸浮停留三秒后顯示大圖，在網(wǎng)頁(yè)中還是比較實(shí)用的，下面是示例代碼2014-09-09
echartjs實(shí)現(xiàn)cross十星輔助線實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了echartjs實(shí)現(xiàn)cross十星輔助線實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
JavaScript實(shí)現(xiàn)輪播圖方法(邏輯清晰一看就懂)
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)輪播圖方法的相關(guān)資料,JS輪播圖的實(shí)現(xiàn)核心是使用JavaScript來(lái)控制圖片的切換和顯示,配合HTML和CSS完成布局和樣式設(shè)置,文中介紹的方法邏輯清晰一看就懂,需要的朋友可以參考下2023-12-12
微信小程序填寫用戶頭像和昵稱實(shí)現(xiàn)方法淺析
這篇文章主要介紹了微信小程序填寫用戶頭像和昵稱實(shí)現(xiàn)方法，我們使用小程序往往能碰到提示允許獲取用戶頭像昵稱，這種功能怎么實(shí)現(xiàn)呢？本篇文章帶你探索2023-02-02
JS實(shí)現(xiàn)移動(dòng)端按首字母檢索城市列表附源碼下載
我們常見(jiàn)的手機(jī)通訊錄或微信通訊錄，聯(lián)系人信息是按字母順序排列的列表，通過(guò)點(diǎn)擊右側(cè)的字母，會(huì)迅速定位檢索到首字母對(duì)應(yīng)的聯(lián)系人。下面通過(guò)本文給大家分享JS實(shí)現(xiàn)移動(dòng)端按首字母檢索城市列表功能，需要的的朋友參考下吧2017-07-07
js通過(guò)元素class名字獲取元素集合的具體實(shí)現(xiàn)
獲取元素集合的方法有很多，接下來(lái)為大家介紹喜愛(ài)使用js通過(guò)元素class名字獲取元素集合的方法2014-01-01
這篇文章主要為大家詳細(xì)介紹了js面向?qū)ο蠓绞綄?shí)現(xiàn)拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
JS實(shí)現(xiàn)頁(yè)面長(zhǎng)時(shí)間不操作退出到登錄頁(yè)面的示例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)頁(yè)面長(zhǎng)時(shí)間不操作退出到登錄頁(yè)面的示例代碼,通過(guò)在head標(biāo)簽中引入jquey和頁(yè)面長(zhǎng)時(shí)間不操作的js頁(yè)面,結(jié)合實(shí)例代碼講解的非常詳細(xì),需要的朋友可以參考下2024-03-03
利用JavaScript編寫一個(gè)花里胡哨的點(diǎn)擊按鈕
這篇文章主要介紹了如何利用HTML+CSS+JavaScript制作一個(gè)花里胡哨的點(diǎn)擊按鈕。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2022-03-03