javascript - Adding new elements to existing Iframe by JS - Stack Overflow

admin管理员组

文章数量:1313800

I'm trying to add some html elements inside a iframe, to personalize a site. I'm building a browser extension, so there is no cross-domain problem. I have the iframe:

<iframe id="container" src="">
    <p>Your browser does not support iframes.</p>
</iframe>

and then, when the document is already loaded, I create the element and insert it... But it is never shown in the iframe. But I am allowed to get an iframe-existent element and to change it's properties. So, I have access to the elements but not for create new ones? Why?

var ifr = document.querySelector("#container");
var ifrDoc = ifr.contentWindow || ifr.contentDocument;
    if (ifrDoc.document) ifrDoc = ifrDoc.document;

var elem = ifrDoc.createElement("div");
    elem.innerHTML = "Demo Box";
    elem.style.width = "50px";
    elem.style.height = "50px";
    elem.style.position = "absolute";
    elem.style.background = "red";

ifrDoc.body.appendChild(elem);

Here a JSFiddle demo to understand the problem (remember extensions have another privileges): /

Any idea?

I'm trying to add some html elements inside a iframe, to personalize a site. I'm building a browser extension, so there is no cross-domain problem. I have the iframe:

<iframe id="container" src="http://www.google.">
    <p>Your browser does not support iframes.</p>
</iframe>

and then, when the document is already loaded, I create the element and insert it... But it is never shown in the iframe. But I am allowed to get an iframe-existent element and to change it's properties. So, I have access to the elements but not for create new ones? Why?

var ifr = document.querySelector("#container");
var ifrDoc = ifr.contentWindow || ifr.contentDocument;
    if (ifrDoc.document) ifrDoc = ifrDoc.document;

var elem = ifrDoc.createElement("div");
    elem.innerHTML = "Demo Box";
    elem.style.width = "50px";
    elem.style.height = "50px";
    elem.style.position = "absolute";
    elem.style.background = "red";

ifrDoc.body.appendChild(elem);

Here a JSFiddle demo to understand the problem (remember extensions have another privileges): http://jsfiddle/TH48e/40/

Any idea?

• javascript
• firefox
• dom
• iframe
• firefox-addon

Share Improve this question Follow edited Nov 26, 2014 at 16:50 erikvold 16.6k1111 gold badges5858 silver badges101101 bronze badges asked Nov 26, 2014 at 1:59 gal007gal007 7,21299 gold badges5050 silver badges7373 bronze badges 5

• Why do you think that HTML content can be inserted in Google.? Can you link somewhere where it says that? I don't see why the Same Origin Policy would be any different when creating Browser extensions. – istos Commented Nov 26, 2014 at 2:46
• Extensions can do that. E.g. Greasemonkey – gal007 Commented Nov 26, 2014 at 2:52
• Are you trying to create a Browser extension or User Script? – istos Commented Nov 26, 2014 at 2:55
• What scope are you running this code from? – Noitidart Commented Nov 26, 2014 at 3:09
• The chrome window (Firefox) – gal007 Commented Nov 26, 2014 at 3:12

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

After your clarification in ments:

var ifr = gBrowser.selectedBrowser.contentDocument.getElementById('container')

Dont do that .contentWindow then get the document from that, its useless redundant etc.

Also dont do querySelector if you want to just get something by id anyways, huge speed difference, getElementById is much faster.

Also don't do .innerHTML the addon approvers won't accept it because it leads to security issues. Do .textContent.

Your fiddle will not work because:

1. You can't do cross frame munication
2. I'm not sure but I think: createElement is a "native" function in javascript so reserved in away although it is document.createElement but ya

This fiddle works, the rawr function is undefined in body, I'm not sure why so i moved the script to the document:

http://jsfiddle/TH48e/43/

<script>
function createElementMY(){
    var doc = document.getElementById('container');

    var ifrDoc = doc.contentDocument;


    var elem = ifrDoc.createElement("div");
    elem.textContent = 'Test';
    ifrDoc.body.appendChild(elem);
}
</script>
<iframe id="container" src="data:text/html,rawr"></iframe>
<button onclick="createElementMY()">Click me!</button>

本文标签： javascriptAdding new elements to existing Iframe by JSStack Overflow