在項(xiàng)目開發(fā)中我們經(jīng)常會遇到彈窗，有的是通過div模擬彈窗效果，有的是通過iframe，也有通過window自帶的open函數(shù)打開一個(gè)新的窗口。今天給大家分享的是最后一種通過window.open()函數(shù)打開頁面進(jìn)行數(shù)據(jù)交互。首先看下效果圖：

原理：

父窗口給子窗口傳遞數(shù)據(jù)是通過url的參數(shù)傳遞過去，子窗口給父窗口傳遞數(shù)據(jù)是通過父窗口的全局函數(shù)傳遞。

代碼：
index.html如下：

復(fù)制代碼代碼如下:

<!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&param2=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如下：

復(fù)制代碼代碼如下:

<!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>

注意：這里需要有服務(wù)環(huán)境運(yùn)行

希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JavaScript中顏色模型的基礎(chǔ)知識與應(yīng)用詳解
顏色模型，是用來表示顏色的數(shù)學(xué)模型。比如最常見的?RGB模型，使用?紅綠藍(lán)?三色來表示顏色。本文就來和大家講講JavaScript中顏色模型的基礎(chǔ)知識與應(yīng)用吧
2023-02-02
JS實(shí)現(xiàn)的五級聯(lián)動菜單效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的五級聯(lián)動菜單效果,結(jié)合完整實(shí)例形式分析了js多級聯(lián)動菜單的完整實(shí)現(xiàn)步驟,涉及JS數(shù)組遍歷、擴(kuò)展及元素節(jié)點(diǎn)操作相關(guān)技巧,需要的朋友可以參考下
2017-02-02
如何確保JavaScript的執(zhí)行順序之實(shí)戰(zhàn)篇
我曾在文章《如何在多個(gè)頁面使用同一個(gè)HTML片段 - 續(xù)》的最后提到JavaScript順序執(zhí)行的特性。雖然現(xiàn)代瀏覽器可以并行的下載JavaScript（部分瀏覽器），但考慮到JavaScript的依賴關(guān)系，他們的執(zhí)行依然是按照引入順序進(jìn)行的。
2011-03-03
bootstrap-Treeview實(shí)現(xiàn)級聯(lián)勾選
這篇文章主要為大家詳細(xì)介紹了bootstrap-Treeview實(shí)現(xiàn)級聯(lián)勾選，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
Javascript淺析執(zhí)行機(jī)制的詳情
這篇文章主要介紹了JavaScript執(zhí)行機(jī)制，想要搞懂JavaScript執(zhí)行機(jī)制，便與進(jìn)程與線程的概念脫不了干系，下面我們就來看看這JavaScript執(zhí)行機(jī)制的具體介紹吧,需要的朋友可以參考一下
2022-08-08
window.location不跳轉(zhuǎn)的問題解決方法
window.location的跳轉(zhuǎn)失效的情況有沒有遇到過啊，這主要是冒泡傳遞影響了，下面有個(gè)不錯(cuò)的解決方法，大家可以參考下
2014-04-04
微信小程序圖片選擇區(qū)域裁剪實(shí)現(xiàn)方法
本篇文章主要介紹了微信小程序圖片選擇區(qū)域屏裁剪實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-12-12
Javascript isArray 數(shù)組類型檢測函數(shù)
在日常開發(fā)中，我們經(jīng)常需要判斷某個(gè)對象是否是數(shù)組類型的，在js中檢測對象類型的常見的方法有幾種.
2009-10-10
Js實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼時(shí)按鈕延遲操作
在做項(xiàng)目的時(shí)候，經(jīng)常遇到發(fā)短信驗(yàn)證碼的問題，這時(shí)候需要用戶點(diǎn)完發(fā)送驗(yàn)證碼按鈕后，一段時(shí)間內(nèi)不能重復(fù)點(diǎn)擊，畢竟驗(yàn)證碼都是收費(fèi)的嘛，誰都不想浪費(fèi)，那么如何實(shí)現(xiàn)這種功能呢？下面來分享一下。
2014-06-06
js的for in循環(huán)和java里foreach循環(huán)的區(qū)別分析
這篇文章主要介紹了js的for in循環(huán)和java里foreach循環(huán)的區(qū)別,實(shí)例分析了js的for in循環(huán)使用技巧并說明了與Java中foreach循環(huán)的使用區(qū)別,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-01-01