Добавить HTML на вставленный iframe - PullRequest
Новая
       2

Добавить HTML на вставленный iframe

3 голосов
/ 09 марта 2011

В настоящее время я разрабатываю панель инструментов из Google Chrome. По сути, это панель инструментов, которую я внедряю в каждую веб-страницу, используя Content-Script. Технически панель инструментов материализуется с помощью iframe, который включает в себя все компоненты, такие как button, 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>

Надеюсь, кто-нибудь может мне помочь! :)

Ответы [ 2 ]

4 голосов
/ 09 марта 2011

Вы должны подождать, пока загрузится iframe.Например: 

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

Не уверен, как Chrome обрабатывает политику одинакового происхождения для скриптов содержимого.

1 голос
/ 09 марта 2011

Поскольку вы используете jQuery, вы можете попробовать использовать 

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

Или, если вы не хотите добавлять текст в тело напрямую, используйте любой другой элемент в выражении find().

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...