关于VUE页面中使用iframe页面空白的原因及解决方式

最近在给客户调试一个vue项目，遇到了h5端中插入视频直播页面是空白页面的问题，只要把网址插入在iframe中，h5页面始终是空白的，但是在浏览器直接输入地址，却能正常访问，网上页查了些资料，有的说是vue路由导致，/#/改为/index.html#/ ；有的说是http请求协议导致，http改为https等等，试了这些方法，全都不行。

想到新打开窗口可以，还是得从安全策略这块入手查找问题才行，尝试了多次，发现使用如下方式可以实现：

<iframe src="https://www.xysrdc.com/" sandbox="allow-same-origin allow-scripts allow-popups allow-forms" frameborder="0" allowfullscreen="allowfullscreen"  style="width: 100%; height: 498px;"></iframe>

主要是添加：

sandbox="allow-same-origin allow-scripts allow-popups allow-forms"

这可能是由于浏览器的安全策略导致的，可以尝试在iframe标签中添加sandbox属性。

还有一种方法就是，在vue页面中添加跨域头信息。

例如：<meta http-equiv="X-Frame-Options" content="ALLOW-FROM https://www.sryun.net/">