我目前正在从 Google Chrome 开发工具栏。基本上它是一个工具栏，我使用内容脚本在每个网页中注入(inject)。从技术上讲，工具栏是由一个 iframe 实现的，它包括所有组件，如按钮、dropMenu、...这是你制作的脚本:
// 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>
希望有人能给我一些帮助! :)
最佳答案
您必须等到 iframe 加载完毕。例如:
iframe.load(function() {
var newButton = ...;
$(this).contents().find('body').append(newButton);
}).appendTo('body');
虽然不确定 Chrome 如何处理内容脚本的同源策略。
关于javascript - 在注入(inject)的 iframe 上添加 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5243771/