现实开发中，有很多时候我们都会遇到在对web也进行数据传输通讯儿掉头发的时候，怎么本地不行啊，怎么参数传不过去啊，怎么跨域了呀。烦死了我要现在提桶了。
诶，这个时候我来劝劝你，千万不要提通，不妨往下看看，说不定就把你的问题给搞定了。哈哈哈哈。省的得不偿失嘞

回到正题，下面再闷就说说平常我们常见的几种开页面的方式，还有解决跨页面、跨域进行参数通信的问题。

常见的几种开页面的方式

1.使用a标签

这个的话就不多说了 相信都知道
// 通过给<a>标签增加target="_blank"属性
<a href="newWin.html" target="_blank">

2.使用window.open()方法

如果没有其他操作控制,只是打开一个新窗口，建议采用第一种方法。
通过js方法打开新窗口，适用于增加控制判断，包括两个窗口之间的通信。

2.1父窗口(原窗口)控制子窗口(新窗口)

A.设置一个全局变量newWin,用来存储新窗口的window对象。

var newWin;

B.新建一个打开新窗口方法，并将新窗口的window对象赋给newWin。

function openNewWin() {
newWin = window.open("newWin.html");
}

C.通过newWin对象,对子窗口执行相关操作。如:

newWin.location.reload();//刷新子窗口
newWin.close();//关闭子窗口
newWin.newWinFn()//调用子窗口中的方法

D.如果存在打开多个窗口的情况，可声明一个全局数组变量newWins 用来存储新窗口window对象。

newWins\[newWins.length-1]//最后打开的一个窗口
newWins\[0]//第一个打开的窗口

完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Parent</title>
<script type="text/javascript">
	var newWins= [];
 
 
	function openNewWin() {
		newWins.push(window.open("newWin.html"));
	}
 
 
	function refreshNewWin() {
		newWins[newWins.length-1].location.reload();
	}
 
 
	function closeNewWin() {
		newWins[newWins.length-1].close();
		newWins.pop();
	}
	function callNewWinFn() {
		newWins[newWins.length-1].newWinFn();
	}
</script>
</head>
<body>
	<div>
		<h1>This is the Parent html</h1>
		<span>
			<a href="newWin.html" target="_blank">OPEN</a> the newWin.
		</span>
		<hr />
		<span>
			<a href="###"  οnclick="openNewWin()">OPEN</a> the newWin by js.
		</span>
		<br />
		<span>
			<a href="###"  οnclick="closeNewWin()">CLOSE</a> the newest newWin.
		</span>
		<br />
		<span>
			<a href="###"  οnclick="refreshNewWin()">REFRESH</a> the newest newWin.
		</span>
		<br />
		<span>
			<a href="###"  οnclick="callNewWinFn()">CALL</a> the newest newWin function.
		</span>
	</div>
</body>
</html>

### window.open()方法的详细用户将在下一期进行讲解，这一期就先说这么多。

下面就说解决通讯的方式

使用postMessage方法进行跨页面通信大致的思路就是：

在子窗口的DOM加载完成后，向父页面发消息，父页面监听到子页面发送的消息后，父页面给子页面发参数。然后子页面通过监听获得父页面发送的message消息，从而获取到父页面发送的参数

父页面的写法：

    // 要打开的页面地址   
    var url = "http://192.168.0.137/link";
    // 样式
    var sFeatures = "dialogWidth:490px;dialogHeight:310px;scroll:no;status:no;";
    // 参数
    var arg= new Object();
    arg.id = "1";
    arg.name = "zhangsan";
 
    // 打开子窗口
	window.popupwin  = window.open(url, vArguments, sFeatures);
    
    // 监听到子页面的message消息后，向子页面发送参数（子窗口打开后，会向当前窗口发送message消息，当前窗口监听到子窗口发送的消息后，向子窗口发消息）
	window.addEventListener('message', function (e) {
		window.popupwin.postMessage({type:'message', 'vArguments':vArguments}, '*');
	})

子页面的写法：

<script language="javascript" type="text/javascript">

    // 获取父页通过postMessage面传过来的参数，在DOM加载完成时执行
	jQuery(function(){
        // 向父页面发消息，触发父页面的监听事件，父页面就会给子页面发参数
        window.opener.postMessage({type:'start', 'message':'start'}, '*');

        // 监听父页面发送的message消息，获取参数
        console.log("get postMessage args...");
        window.addEventListener('message', function (e) {  // 监听 message 事件
            console.log("postMessage type：" + e.data.type);
            console.log("postMessage args：" + e.data.vArguments);
            window.parentArg = e.data.vArguments;
        });

	});

微信图片_20220319164233.gif

# 总结

1.打开方式为两种：超链接、window.open方法
2.通信方法为使用postmessage方法
3.通信的思路大致为通过window来监听message向子页面发送参数，子页面监听到变化获取参数从而在向父页面发送信息，从而达到跨页面通信的功能

从打开页面方式到跨页面进行通讯（web页通信）