阻止了来自"https://www.youtube.com"源的一个框架访问一个来源为"file://"的框架。

Question

我有一个YouTube的URL：

<iframe class="embed-responsive-item" ng-src="https://www.youtube.com/embed/s7gJ74ARN84" allowfullscreen=""></iframe>

如果我在我的本地HTML文件中使用它，那么它会很好地播放。 但是当我将相同的内容粘贴到phonegap ios应用程序HTML页面中，并在iOS模拟器上运行时，当我点击视频时会显示以下错误：

Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "file://".  

The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "file". Protocols must match.

解决方案：

虽然在模拟器中无法工作，但在移动设备上却可以，而这正是我的终极目标。

- Manish Kumar

---

你能修好它吗？ - Rohit Singh

Answer 1

@Manish， 由于您已经处理了CORS问题，您收到的错误信息如下：

请求访问的框架协议为“https”，被访问的框架协议为“file”。协议必须匹配。

既然不是CORS问题，您是否已经摆脱了iframe？如果可以解决问题，也许您需要一个隐藏的<div>。

Jesse

- user3255670

---

我没明白你的意思，可以请你给一个例子参考一下我的 YouTube 视频吗？ - Manish Kumar

Answer 2

亲爱的Manish，

看起来你遇到了CORS问题。你可以在config.xml中添加<access origin="*"/>。

Jesse

- user3255670

---

这似乎没有帮助（至少在iOS 9.3，cordova 6.4.0，cordova-plugin-whitelist 1.3.0中）。 - Peter

Answer 3

嘿，这只是一个非常小的问题

你的链接是这个 => "https://www.youtube.com/embed/s7gJ74ARN84"

但你只需要将它更改为

这个链接 "//www.youtube.com/embed/s7gJ74ARN84"

记住，当你尝试在你的网站中加载安全内容时，只需从链接中删除协议即可。

- chiragchavda.ks

---

尝试使用此代码<iframe width="854" height="510" src="//www.youtube.com/embed/bAQq2mENhR4" frameborder="0" allowfullscreen></iframe>，但出现了以下错误：Failed to load resource: The requested URL was not found on this server. file://www.youtube.com/embed/bAQq2mENhR4。 - Manish Kumar

在 jsfiddle 中，甚至 <iframe width="854" height="510" src="http://www.youtube.com/embed/bAQq2mENhR4" frameborder="0" allowfullscreen></iframe> 都可以正常工作。 - Manish Kumar

尝试使用此链接，它似乎很有用：http://stackoverflow.com/questions/7585643/youtube-videos-on-iphone-phonegap-app + https://developers.google.com/youtube/iframe_api_reference - chiragchavda.ks

问题是在IOS模拟器中无法运行，但在手机上可以运行，这是我的最终目标 :) - Manish Kumar

很高兴你解决了问题...如果你更改了任何设置，请发布解决方案。 - chiragchavda.ks

这是因为它自动匹配协议吗？所以如果原始页面是file://index.html，那么//url.com将变成file://url.com。 - JVE999