如何使用FirefoxSDK插件将iframe附加到托管页面？

假设FirefoxSDK插件中的数据文件夹中有

frame.html

， 如何附加iframe并将

frame.html

定义为其源

其他信息： 由于CPS，无法使用内联源代码，因此我无法使用

data.load（'frame.html'）

，我需要使用文件的URL：

lib/main.js

tabs.activeTab.attach({
  contentScriptFile: [self.data.url("js/appender.js") ],
  attachTo: 'top',
  contentScriptOptions: {
    scriptUrl: self.data.url("js/sandbox.js"),
    imageUrl: self.data.url("image.jpg")
    frameUrl: self.data.url("sandbox.html")
  }
});

data/appender.js

  var scriptTag = document.createElement("script");
  scriptTag.src = self.options.scriptUrl;
  document.body.appendChild(scriptTag); // worked fine

  var imageTag = document.createElement("image");
  imageTag.src = self.options.imageUrl;
  document.body.appendChild(imageTag); // worked fine

  var iframeTag = document.createElement("iframe");
  iframeTag.src = self.options.frameUrl;
  document.body.appendChild(iframeTag); // the html tag of iframe is empty

var iframeTag = document.createElement("iframe");
iframeTag.src = self.options.frameUrl;
document.body.appendChild(iframeTag); // the html tag of iframe is empty

// note that the iframe is attached after the content ready event, so you have to inform the background when it can start working with the iframe
self.port.emit("attached", true);

---

它是空白的，因为firefox安全策略不允许内容脚本将资源URL作为iFrame加载。解决方案可以是直接从后台脚本进行设置，为此您需要使用低级sdk

var { viewFor } = require("sdk/view/core");
var tab_utils = require("sdk/tabs/utils");

var iframe = viewFor(tab).linkedBrowser._contentWindow.document.querySelector('iframe[src="' + self.data.url("sandbox.html") + '"]')
iframe.contentWindow.location.href = iframe.getAttribute("src")

因此，完全正常工作的代码如下所示：

data/appender.js

  var scriptTag = document.createElement("script");
  scriptTag.src = self.options.scriptUrl;
  document.body.appendChild(scriptTag); // worked fine

  var imageTag = document.createElement("image");
  imageTag.src = self.options.imageUrl;
  document.body.appendChild(imageTag); // worked fine

  var iframeTag = document.createElement("iframe");
  iframeTag.src = self.options.frameUrl;
  document.body.appendChild(iframeTag); // the html tag of iframe is empty

var iframeTag = document.createElement("iframe");
iframeTag.src = self.options.frameUrl;
document.body.appendChild(iframeTag); // the html tag of iframe is empty

// note that the iframe is attached after the content ready event, so you have to inform the background when it can start working with the iframe
self.port.emit("attached", true);

main.js

tabs = require("sdk/tabs")
self = require("sdk/self")

var { viewFor } = require("sdk/view/core");
tab_utils = require("sdk/tabs/utils");

tabs.on("ready", function(tab) {
  var worker = tab.attach({
    contentScriptFile: [self.data.url("js/appender.js") ],
    attachTo: 'top',
    contentScriptOptions: {
      frameUrl: self.data.url("sandbox.html")
    }
  });

  worker.port.on('attached', function() {
    reinitIframe(tab)
  });

  function reinitIframe(tab) {
    var iframe = viewFor(tab).linkedBrowser._contentWindow.document.querySelector('iframe[src="' + self.data.url("sandbox.html") + '"]')
    iframe.contentWindow.location.href = iframe.getAttribute("src")
  }
})

---

为了让它在未来版本的Firefox中工作，您可能需要一个更好的方法。添加一个空白的

并为

加载

事件附加一个事件侦听器。然后，您可以像往常一样轻松地将任何想要的元素附加到iframe

在内容脚本中包括以下内容：

var iframe = document.createElement('iframe'),
  div = document.createElement('div');
div.textContent('Hello World');
document.body.appendChild(iframe);
iframe.addEventListener('load', function(){
  this.contentWindow.document.body.appendChild(div)
})

---

我很感激。谢谢你让我们免于头痛。我用过这个，工作。但是为什么我不能在这个iframe上发布消息呢？@alihagheatkhah这应该可以从你的内容中实现，很悲惨！不是。我改为发送自定义事件。