关于iframe父子页面传值遇到的一些问题及解决办法

iframe父子页面之间传值需要在服务器下进行（因为一些浏览器不支持file://协议的页面跨框架获取）。
那么如何把本地文件变成http请求获取呢？
1.首先全局安装：serve: npm install -g serve
2.找到你想用http请求的文件目录
3.在目录下打开cmd
4.启动命令：serve -p 8080
5.直接访问localhost:8080即可访问到本地文件
那么在iframe父子页面之间进行传值操作时会经常遇到这样的坑，由于在一些浏览器可能不支持file://协议的页面夸框架获取，需要以http：//协议访问页面。
还有一点当要获取值或对象时，要等框架内页面加载完成后才能获取。
例如现在有两个页面，一个页面是父页面，里面嵌套了一个iframe子页面，那么现在要让父页面得到子页面里的对象，该如何实现呢？如下所示：

这是含有iframe的父页面，而子页面的是这个样子的：

 
 
 
 
 
哈哈，这是一个测试.终于成功了
 
 
 
 

如果直接在本地打开文件显示undefind:

这就是因为一些浏览器不支持file://协议的页面跨框架获取，那么我们将其放在http下就OK了，如图：
启动serve（注意，要在你将要访问的文件夹里打开命令行）:

成功以后在浏览器里直接访问本地文件：

如图，点击iframe-test.html，然后打开控制台发现，原来的undefind已经变成了iframe.html里p标签的内容，说明此时，我们成功的在父子页面之间进行了传值：

接下来就可以按照实际需求进行页面之间的操作。

（emmmm，建议能使用框架的最好使用框架，比如vue、angular、react等主流框架，会方便很多）

公众号：Coder 杂谈，欢迎关注