在注入的iframe上添加HTML

我目前正在從Google Chrome開發工具欄。基本上它是一個工具欄，我通過使用Content-Script在每個網頁中注入。技術上工具欄由一個IFRAME，其中包括像按鈕，所有的部件materializd，dropMenu，...這是你做這個腳本：在注入的iframe上添加HTML

// 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>

希望有人能給我提供一些幫助！ :)

來源

2011-03-09 Sindar

你必須等到iframe加載。例如：

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

不確定Chrome如何處理內容腳本的同源策略。

來源

2011-03-09 09:47:34

它沒有工作，你說'Chrome同源策略'是什麼意思？ – Sindar 2011-03-09 10:31:11

@Sindar：在一般網站中，如果內容來自不同的域，則無法訪問iframe的內容。但是，由於內容腳本是特殊的，所以它可能是可能的。你有任何錯誤信息？ – 2011-03-09 12:52:38

@Felix Kling：是的，不安全的JavaScript嘗試訪問來自URL http://www.luleriemates.com/professional的框架的URL chrome-extension：//dkdmapmlfmfkppikamibckkojpofeadp/yourtoolbar.html。域，協議和端口必須匹配。 jquery.js：16Uncaught TypeError：無法讀取未定義的屬性'文檔' – Sindar 2011-03-09 14:28:38

由於您使用jQuery的，你可以嘗試使用

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

或者，如果你不想直接追加到身體，在find()語句中使用的任何其他元素。

來源

2011-03-09 09:45:17

在注入的iframe上添加HTML

回答

相關問題