在注入的 iframe 上添加 HTML
Posted
技术标签:
【中文标题】在注入的 iframe 上添加 HTML【英文标题】：Add HTML on an injected iframe 【发布时间】：2011-07-11 18:07:20 【问题描述】：我目前正在从 Google Chrome 开发工具栏。基本上它是一个工具栏，我通过使用内容脚本在每个网页中注入。从技术上讲，工具栏是由一个 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" ></a>');
yt.append(newButton);
iframe 的主体如下所示：
<body>
<div class="default">
// COMPONENTS
</div>
</body>
希望有人能给我一些帮助！ :)
【问题讨论】：
【参考方案1】：您必须等到 iframe 加载完毕。例如：
iframe.load(function()
var newButton = ...;
$(this).contents().find('body').append(newButton);
).appendTo('body');
不确定 Chrome 如何处理内容脚本的同源策略。
【讨论】：
它不起作用，你说“Chrome 同源策略”是什么意思？ @Sindar：在普通网站中，如果内容来自不同的域，您将无法访问 iframe 的内容。但由于内容脚本很特别，它可能是可能的。您收到任何错误消息吗？ @Felix Kling：是的，不安全的 JavaScript 尝试从 URL valeriemates.com/professional 的框架访问具有 URL chrome-extension://dkdmapmlfmfkppikamibckkojpofeadp/yourtoolbar.html 的框架。域、协议和端口必须匹配。 jquery.js:16Uncaught TypeError：无法读取未定义的属性“文档” @Sindar：哦，太糟糕了。那我猜是不可能的……不过你为什么不直接把按钮加到yourtoolbar.html呢？
@Felix Kling：问题是这个文件“yourtoolbar.html”是基本的工具栏。我需要做的是加载此文件并添加人员功能中的组件。你关注我了吗？【参考方案2】：
由于您使用的是jQuery，您可以尝试使用
$('#YourToolbarFrame').contents().find('body').append(newButton);
或者，如果您不想直接附加到正文，请使用 find() 语句中的任何其他元素。
【讨论】：
以上是关于在注入的 iframe 上添加 HTML的主要内容，如果未能解决你的问题，请参考以下文章