我正在构建一个 Chrome 扩展程序，它在任何 HTML 页面（即在浏览器窗口中查看的任何页面）内创建一个 iFrame。
iFrame 由 Chrome 扩展的内容脚本“注入”到 HTML 页面中。生成的 HTML 如下所示：
<html>
<head>..</head>
<body>..</body>
<iframe id="myIframe">...</iframe>
</html>
在内容脚本将 iFrame 添加到主页面的 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"
}],
我怀疑 iframe 本身需要访问 Zurb 脚本，以及作为扩展的一部分由清单加载的foundation.min.js，我的内容脚本还在 iframe 中添加相关标签（通过操作 DOM ）。我的理解是 iframe 中的关键元素是：
- Zurb JS 文件的标签
- 将兜风附加到 (id="testjoyride") 的对象
- 兜风内容本身
- 对foundation()的初始化调用
因此，考虑到这一点，我的清单的 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 也不会转换为自动生成的输出（如此处所述）。
我在一个简单的 HTML 页面中创建了一个测试用例，它运行良好，我试图将该测试页面移动到 iframe 中，而joyride 停止工作。因此，尽管没有太多信心，但我怀疑问题在于 iframe，而不是 Chrome 扩展。
** 注意，我将此调用放在所有 DOM 操作的末尾。在我将我创建的新 HTML 添加到 iframe 的 DOM 之后，以及在创建我所有的侦听器等之后。所以我相信脚本和游戏应该在那时“那里”。但是，如果我在调用foundation('joyride','start') 之前粘贴一个alert()，则警报会在其后面显示一个空的iframe，并且只有在我关闭警报之后才会填充iframe。这是否重要，或者只是警报的奇怪效果，我不知道。