浅谈原生js在本地查看网页文件即file://协议下无视浏览器同源策略让网页窗口跨域实现互相传输信息的两种方法

1.背景

  写这篇文章时我正是在大一期末写网页大作业的时候，交作业时是直接用浏览器本地查看的，因为浏览器同源策略的原因，file协议下很多网页通信手段不能使用，例如cookie，LocalStorage，直接操作子页面里的元素等，最后查阅资源找到两种可行的方案，总结写了这篇文章。

2.所用技术

  方法一.PostMessage Api

  具体的信息可以查看官方文档，我在这里就不多说了，主要说一下我在开发中遇到的问题和解决方案，在开发中我在父页面用iframe标签来嵌套子页面，之后使用这个api进行消息传递，可最后却发现子页面无法收到消息，后来发现是因为我父页面的iframe标签是使用for循环动态加载的，在没加载完成之前代码就以及跑到发送向子页面发送消息那段，自然没法成功接收，解决方法：

子页面这样写：

window.onload = function(){   //当前页面加载完毕后发送给父页面加载完成的消息
window.top.postMessage("over", "*");
}

window.addEventListener("message", getmessage);   //监听其他页面发送的消息
function getmessage(e){
   //这里写收到消息后的操作
}

父页面这样写：

window.onmessage = function(a){                            //判断发来的消息是否正确，正确发送数据
if(a.data=='over'){
      这里写获取的要发送消息的iframe标签的名称.contentWindow.postMessage("这里写要发送的消息", "*");
    }
}

通过这种方式就可以在子页面加载完成后再发送消息。

方法二.片段标识符

  同样具体的信息可以查看官方文档，这里我提供一个传输多组数据小技巧，可以将要传递的每个数据用一个符号隔开，获取的时候用.split()方法隔开存放到一个数组就行，使用的时候更加的方便，但要注意数组中的第一个数据即sz[0]为#。例如：

子页面这样写：

var message = window.location.hash;   //获取片段标识
var sz = message66.split('+');   //将获取到的片段标识对于+号进行分割，并存放到sz数组中，注意：数组中的第一个数据即sz[0]为#

父页面这样写：

window.open('index.html#+0+0');   //用+号进行分隔

本片文章到此结束，感谢大家的观看！