Fatal编程技术网
  • javascript/
  • Javascript 如何在Chrome应用程序中访问/替换iframe？

Javascript 如何在Chrome应用程序中访问/替换iframe？

javascript google-chrome

Javascript 如何在Chrome应用程序中访问/替换iframe？,javascript,google-chrome,google-chrome-app,content-security-policy,Javascript,Google Chrome,Google Chrome App,Content Security Policy,然而，我正在阅读的是，我在浏览器中看到的行为与文档不匹配，文档本身似乎相互矛盾，特别是： 指向远程URL的iFrame，在Chrome应用程序中被禁用 vs，在完全相同的页面上： 沙盒页面可以使用iframe 它似乎包括清单中的权限所允许的远程iFrame 我的使用案例相当简单：我想将Spotify播放器嵌入我的Chrome应用程序中，这通常是通过 我的manifest.json "app": { "background": { "scripts": ["js/background

然而，我正在阅读的是，我在浏览器中看到的行为与文档不匹配，文档本身似乎相互矛盾，特别是：

指向远程URL的iFrame，在Chrome应用程序中被禁用

vs，在完全相同的页面上：

沙盒页面可以使用iframe

它似乎包括清单中的
权限所允许的远程iFrame

我的使用案例相当简单：我想将Spotify播放器嵌入我的Chrome应用程序中，这通常是通过



我的
manifest.json


"app": {
  "background": {
    "scripts": ["js/background.js"]
  }
},
"permissions": [
  "https://embed.spotify.com/*"
],
"sandbox": {
  "pages": ["sandbox.html"]
},


以及my sandbox.html（位于背景页上自己的iframe中）：





然而，我仍然得到：

拒绝帧“”，因为它违反了以下内容安全策略指令：“帧src'self'数据：chrome扩展资源：”。
html:2

即使这与在应用程序页面中嵌入沙盒页面的示例相匹配。也许我应该用一个webview代替？文件没有说清楚

我是否可以访问iframe中的外部站点？如果可以，如何访问？
此短语：

指向远程URL的iFrame，在Chrome应用程序中被禁用

事实并非如此。默认情况下，指向远程URL的iFrame被禁用，但有两种机制可以加载指向远程URL的iFrame：


    

  • 如果您有从web加载的内容（例如，它需要是最新的），但应用程序其余部分未与之交互，请使用webview。webview可以访问iFrame，但它们根本无法与应用程序的其余部分通信。另一方面，它们又好又简单
    • 

  • 如果您有从web加载并与应用程序其他部分交互的内容，请使用沙箱：
    

  • 制作一个普通页面（包含在你的Chrome应用程序中），作为一个普通的Chrome应用程序页面，它可以访问Chrome.*API，在iframe中加载一个沙盒页面（2）
    • 

  • 制作一个沙盒页面（包含在扩展中），其中包含指向第三方站点的iframe、第三方脚本等
    • 

  • 第三方站点位于iframe中，从（2）
    • 



然后使用从1到2发送消息。例如，第1页可以使用chrome.*API做一件事，然后将消息发布到沙盒页面。沙盒页面随后接收该消息并可以采取一些操作

就我而言：


    

  • （2） 加载SoundCloudAPI（使用iframe，如（3））
    • 

  • （1） 使用postmessage（）告诉（2）播放曲目，soundcloud API在iframe（3）中就是这样做的
    • 



<body>
  <iframe src="https://embed.spotify.com/?uri=spotify:track:4bz7uB4edifWKJXSDxwHcs" width="300"  height="380" frameborder="0" allowtransparency="true"></iframe>
</body>