在注入的iframe上添加HTML

我目前正在从Google Chrome开发工具栏。基本上它是一个工具栏，我通过使用Content-Script在每个网页中注入。技术上工具栏由一个IFRAME，其中包括像按钮，所有的部件materializd，dropMenu，...这是你做这个脚本：在注入的iframe上添加HTML

// Take down the webPage 

document.getElementsByTagName('body')[0].style.marginTop = '39px'; 

var body = $('body'), 
toolbarURL = chrome.extension.getURL("yourtoolbar.html"), 
iframe = $('<iframe id="YourToolbarFrame" scrolling="no" src="'+toolbarURL+'">'); 

// Insertion 
body.append(iframe);  

// Effect 
$("#YourToolbarFrame").hide().fadeIn(800);

但现在我正在努力增加这个iframe中的一些组件例如按钮，但没有奏效...

var yt = $("#YourToolbarFrame"); 
var newButton = $('<a href="javascript:openInstantMessage()"><input type="image" src="images/pop.ico" name="InstantMessage" width="23" height="23"></a>'); 
yt.append(newButton);

iframe的身体看起来就像这样：

<body>   
    <div class="default"> 
     // COMPONENTS 
    </div> 
</body>

希望有人能给我提供一些帮助！ :)

来源

2011-03-09 Sindar

你必须等到iframe加载。例如：

iframe.load(function() { 
    var newButton = ...; 
    $(this).contents().find('body').append(newButton); 
}).appendTo('body');

不确定Chrome如何处理内容脚本的同源策略。

来源

2011-03-09 09:47:34

它没有工作，你说'Chrome同源策略'是什么意思？ – Sindar 2011-03-09 10:31:11

@Sindar：在一般网站中，如果内容来自不同的域，则无法访问iframe的内容。但是，由于内容脚本是特殊的，所以它可能是可能的。你有任何错误信息？ – 2011-03-09 12:52:38

@Felix Kling：是的，不安全的JavaScript尝试访问来自URL http://www.luleriemates.com/professional的框架的URL chrome-extension：//dkdmapmlfmfkppikamibckkojpofeadp/yourtoolbar.html。域，协议和端口必须匹配。 jquery.js：16Uncaught TypeError：无法读取未定义的属性'文档' – Sindar 2011-03-09 14:28:38

由于您使用jQuery的，你可以尝试使用

$('#YourToolbarFrame').contents().find('body').append(newButton);

或者，如果你不想直接追加到身体，在find()语句中使用的任何其他元素。

来源

2011-03-09 09:45:17

在注入的iframe上添加HTML

回答

相关问题