Question

我正在尝试在ionic3中设置iframe，但我面临着这个问题拒绝显示一个网页框架。

这是我的代码。

 <ion-content>
      <div #frame style="width:100%; height:100%; overflow:scroll !important;-webkit-overflow-scrolling:touch !important">
        <iframe [src]="url" class="iframe" scrolling="yes" ></iframe>
      </div>
    </ion-content>

 onInput() {
    this.open = true;
    this.url = this.domSanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/results?search_query=' + this.myInput);
}

Answer 1

当您发送 GET ， POST ， iframe（GET）等请求时，您的浏览器或WebView会通过deffault添加标题在名为"origin"的“请求标头”中。标题， CAN'T 可以改变它。

在您的情况下，我可以看到您尝试嵌入的网址："https://www.youtube.com/embed/results?search_query= + this.myInput"但是Youtube的文档说的网址必须是："http://www.youtube.com/embed/VIDEO_ID?origin=http://yourPage.com"。

在Youtube中使用<iframe>时，您必须始终在链接参数中发送原点。

<强>来源：此参数为IFrame API提供了额外的安全措施并且仅支持IFrame嵌入。如果您使用的是IFrame API，表示您将enablejsapi参数值设置为1，您应始终将域指定为原始参数值。 https://developers.google.com/youtube/player_parameters?hl=en-419#origin

您可以在此处获得文档de Youtube的链接：https://developers.google.com/youtube/player_parameters?hl=en-419

问候！

Answer 2

尝试将它放在两个平台部分的config.xml文件中

    <allow-navigation href="*" />
    <allow-navigation href="https://*youtube.com/*" />

Answer 3

Youtube在其响应标头上将X-FRAME-OPTIONS设置为SAMEORIGIN，这意味着只有与Youtube（youtube.com）具有相同来源的网站才能在iframe或对象中加载该网站。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

您必须按照Youtube要求的方式嵌入视频。

拒绝显示一个框架，因为它将'X-Frame-Options'设置为'sameorigin'

3 个答案: