在注入的iframe上添加HTML [英] Add HTML on an injected iframe
问题描述
我目前正在从Google Chrome开发工具栏。基本上它是一个工具栏，我通过使用Content-Script在每个网页中注入。从技术上讲，工具栏是由一个iframe实现的，其中包含所有组件，如按钮，dropMenu，...以下是您创建的脚本： $ c> //取下网页
document.getElementsByTagName（'body'）[0] .style.marginTop ='39px';
var body = $（'body'），
toolbarURL = chrome.extension.getURL（yourtoolbar.html），
iframe = $（'< iframe id =YourToolbarFramescrolling =nosrc ='+ toolbarURL +'>'）;
//插入
body.append（iframe）;
//效果
$（＃YourToolbarFrame）。hide（）。fadeIn（800）;
但现在我试图在iframe上添加一些组件，例如一个按钮，但它没有't work ...
var yt = $（＃YourToolbarFrame）;
var newButton = $（'< a href =javascript：openInstantMessage（）>< input type =imagesrc =images / pop.iconame =InstantMessagewidth =23 height =23>< / a>'）;
yt.append（newButton）;
iframe的正文如下所示：
<身体GT;
< div class =default>
//组件
< / div>
< / body>
希望有人能为我提供一些帮助！ ：）
您必须等到iframe加载完毕。例如：
iframe.load（function（）{
var newButton = ...;
$ （this）.contents（）。find（'body'）。append（newButton）;
}）。appendTo（'body'）;
不知道Chrome如何处理内容脚本的同源策略。
I'm currently developing a Toolbar from Google Chrome. Basically it's a toolbar that i'm injecting in every web pages by using a Content-Script. Technically the toolbar is materializd by a iframe that include all the components like button, dropMenu,... Here is the script you make this :
// 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);
But right now i'm trying to add some component on this iframe for example a button but it didn't work...
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);
The body of the iframe look like this :
<body>
<div class="default">
// COMPONENTS
</div>
</body>
Hope someone can provide me some help ! :)
You have to wait until the iframe loaded. E.g.:
iframe.load(function() {
var newButton = ...;
$(this).contents().find('body').append(newButton);
}).appendTo('body');
Not sure how Chrome handles the same-origin policy for content scripts though.
这篇关于在注入的iframe上添加HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
