通过Chrome扩展内容脚本在iFrame中激活Zurb基金会的Joyride

我正在构建一个Chrome扩展程序，该程序可在任何HTML页面（即在浏览器窗口中查看任何页面）内创建iFrame。通过Chrome扩展内容脚本在iFrame中激活Zurb基金会的Joyride

iFrame通过Chrome扩展程序的内容脚本“注入”HTML页面。生成的HTML看起来像这样：

<html> 
    <head>..</head> 
    <body>..</body> 
    <iframe id="myIframe">...</iframe> 
</html>

后的内容脚本添加到主页面的DOM它继续通过操纵自己的DOM来填充内容的iframe内嵌框架。我使用Zurb CSS来设置iframe内容的样式。

而这一切工作正常。

我现在正试图将Zurb Joyride添加到iframe的内容中，这是我无法工作的原因。

我的清单的content_scripts声明如下所示：

"content_scripts": [{ 
    "matches": ["*://*/*"], 
    "js":   ["js/externalJS/jquery-2.1.4.min.js", 
        "js/externalJS/foundation.min.js", 
        "js/content_script.js"], 
    "run_at":  "document_end" 
}],

我怀疑本身需要有机会获得Zurb脚本的iframe，所以还有foundation.min.js由清单被加载的一部分扩展名，我的内容脚本还在iframe中添加了相关标签（通过操作DOM）。我的理解是，iframe中的关键要素是：

标签Zurb JS文件
将对象兜风重视（ID =“testjoyride”）
的兜风内容本身
初始化调用基金会（）

因此，考虑到这一点，我有清单的web_accessible_resources声明看起来像这样：

"web_accessible_resources": [ 

    "js/externalJS/jquery-2.1.4.min.js", 
    "js/externalJS/vendor/modernizr.js", 
    "js/externalJS/vendor/fastclick.js", 
    "js/externalJS/foundation.min.js", 
    "css/foundation.css", 
    "css/app.css" 
],

然后使用内容脚本建立起来的iframe中下面的HTML：

<iframe id="myIframe"> 
    <html> 
    <head> 

     <!-- the foundation style sheet (which works fine already) --> 
     <link type="text/css" rel="stylesheet" href="chrome-extension://extension_id/css/foundation.css"> 

     <!-- the first two scripts --> 
     <script src="chrome-extension://extension_id/js/externalJS/vendor/modernizr.js"></script> 
     <script src="chrome-extension://extension_id/js/externalJS/jquery-2.1.4.min.js"></script> 

    </head> 

    <body> 

     <!-- a test object to attach the joyride too --> 
     <input type="submit" id="testjoyride"> 

     <!-- now the rest of the iframe content --> 
     ... content ... 

     <!-- the other two scripts --> 
     <script src="chrome-extension://extension_id/js/externalJS/vendor/fastclick.js"></script> 
     <script src="chrome-extension://extension_id/js/externalJS/foundation.min.js"></script> 

     <!-- default joyride code from foundation.zurb.com --> 
     <ol class="joyride-list" data-joyride=""> 
     <li data-id="testjoyride" data-class="custom so-awesome" data-text="Next" data-prev-text="Prev">  
     <h4>Stop #1</h4>  
     </li> 
     <li data-button="end" data-prev-text="Prev"> 
      <h4>Stop #3</h4> 
     </li> 
     </ol> 

    </body> 
    </html> 
</iframe>

然后，最后，当所有上述内容连接到IFRAME（和IFRAME，当然，附加到父页面的DOM）我从content_script调用foundation（）。我想我需要这样称呼它： $（window.frames.myIframe.contentWindow.document）.foundation（'joyride'，'start'）;

即通过在iframe的文档对象，不是父页面**

所以我做了这一切，并没有任何反应。兜风不会出现，HTML也不会转换为自动生成的输出（如here所述）。

我在一个简单的HTML页面中创建了一个测试用例，它工作正常，我试图将该测试页移动到iframe中，并且蹒跚学步停止工作。因此，我怀疑，尽管没有多少信心，问题在于iframe，而不是Chrome扩展。

**注意，我把这个调用放在所有DOM操作的末尾。将我创建的新HTML添加到iframe的DOM之后，并在创建完所有听众之后，等等。因此，我相信脚本和joyrides应该是“那里”。但是，如果我在调用基础（'joyride'，'start'）之前粘贴alert（），则警报会显示一个空的iframe，并且只有在我关闭警报后才会填充iframe。不管这很重要，还是只是一个奇怪的警报效果，我都不知道。

来源

2015-09-07 Brian

暗示您在您的内容脚本中创建iframe尝试使用'window.postMessage'向您的iframe脚本发送一个事件（[示例]（https://viget.com/extend/using-javascript-postmessage-to-talk ）在此之前，在iframe中插入一个额外的简单脚本，并在该消息的侦听器中调用'foundation（'joyride'，'start'）;'。或者使用chrome API来交换消息，但这可能会更麻烦一些。 – wOxxOm

就是这样！ 3我不明白的事情：1）正如你所说，@ wOxxOm，从iframe调用'foundation（'joyride'，'start'）'是答案。但是为什么从内容脚本（通过iframe文档）调用它不起作用？ 2）如果我只是使用'innerHTML + ='

通过Chrome扩展内容脚本在iFrame中激活Zurb基金会的Joyride

相关问题