Geek asks and answers

Add HTML on a nested iframe

I am currently developing a toolbar from Google Chrome. This is basically a toolbar that I insert into each web page using Content-Script. Technically, the toolbar is a materialized iframe that includes all components, such as a button, dropMenu, ... Here is the script you do 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 kind of component to this iframe, for example a button, but this did not 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 iframe body looks like this:

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

Hope someone can help me! :)

+3
source share
2 answers

You need to wait for the iframe to load. For instance:.

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

I don’t know how Chrome handles policies of the same origin for content scripts.

+4

jQuery,

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

, , find().

+1

More articles:


All Articles