how to replace innerHTML with an external (but local) file

Question

I'm writing a firefox plugin which adds a div to the top of the page with various things in it. I can change the content of the div when writing html code directly into the .innerHTML property.... but it looks very messy and it's hard to make changes to the code. I've read about iframes but it doesn't seem to work, nothing is shown but a vertical line. The object tag isn't working either. Can someone help me?

My code:

    var div = document.createElement('div');
    div.id='mainplugindiv';
    div.style.width = '100%';
    div.style.height = '150px';
    div.style.background = '#313192';
    div.style.color = 'white';

    div.innerHTML = "<iframe src=\"test.html\"></iframe>"; //not working

Maybe this helps... var iframe = document.createElement('iframe'); iframe.src = 'url'; Make sure to check in the console if the URL you require is found. (no 404 errors) — Fez Vrasta
– Fez Vrasta, Commented May 2, 2016 at 12:50

cнŝdk · Accepted Answer · 2016-05-02 14:38:27Z

2

first we need to create a div and then create iframe object.then you can append iframe into created div and then append created div into Html body.

here it is,

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    var newDiv, iframe;
    newDiv = document.createElement("div");
    iframe = document.createElement("IFRAME");
    iframe.setAttribute("src", "http://en.wikipedia.org");;
    $(iframe).appendTo($(newDiv));
    $(newDiv).appendTo($('body'));
  });
</script>

<body>
  <p>testing
  </p>
</body>

</html>

edited May 2, 2016 at 14:38

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

answered May 2, 2016 at 14:08

Pawan Kashyap

1464 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

cнŝdk Over a year ago

The question doesn't have a jquery tag, why would you suggest jquery for it?

Pawan Kashyap Over a year ago

Actually i just want to show working flow. how could replace inner html with outer file. if you want without jQuery. lets try this one. <html> <script> function apendIframe() { var newDiv,iframe; newDiv = document.createElement("div"); iframe = document.createElement("IFRAME"); iframe.setAttribute("src", "en.wikipedia.org"); newDiv.innerHTML = iframe.outerHTML; document.body.appendChild(newDiv); }; </script> <body onload="apendIframe()"> <p> testing </p> </body> </html>

Janine Polster Over a year ago

my problem is, that I don't have access to the source html page. So it has to go in my .js file.

cнŝdk · Accepted Answer · 2016-05-02 14:38:59Z

1

You could use Jquery for this.

The code below will load all the content from the htmlSheet.html into your div element.

 $.get("path/path/htmlSheet.html", function (htmlSheet) {
    $("#mainplugindiv").html(htmlSheet);
...
}

HTML after executing the code above:

<div id="mainplugindiv">
    //here will be the content of htmlSheet.html
</div>

edited May 2, 2016 at 14:38

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

answered May 2, 2016 at 12:51

d4rty

4,2585 gold badges40 silver badges76 bronze badges

3 Comments

cнŝdk Over a year ago

The question doesn't have a jquery tag, why would you suggest jquery for it?

d4rty Over a year ago

It is one possible solution.

cнŝdk Over a year ago

Yes, but we should always respect the OP specification, maybe he doesn't need jquery .

cнŝdk · Accepted Answer · 2016-05-02 15:12:00Z

1

In your actual code you are just creating a div, but not appending it to the page.

You can use document.body.appendChild(div) to append it to the body:

    var div = document.createElement('div');
    div.id='mainplugindiv';
    div.style.width = '100%';
    div.style.height = '150px';
    div.style.background = '#313192';
    div.style.color = 'white';

    div.innerHTML = "<iframe src=\"test.html\"></iframe>";
    document.body.appendChild(div);

EDIT:

The actual code works fine, I even tested it in Firefox and it gives the same result, if this is not your problem then maybe you need to be more specific with the result you are getting.

edited May 2, 2016 at 15:12

answered May 2, 2016 at 14:19

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

4 Comments

d4rty Over a year ago

The questioner doesn't have the problem that the div is not appended to the body. "I can change the content of the div when writing html code directly into the .innerHTML property.... but it looks very messy and it's hard to make changes to the code."

Janine Polster Over a year ago

it doesn't work... it shows the frame of the iframe, but no content, not for my local html or any other (like www.google.de)

cнŝdk Over a year ago

@JaninePolster Maybe there's something wrong with your path?

Janine Polster Over a year ago

not very likely, in that case there would appear a 404, like in the snippet above.. But mine is empty. I put the test html in every folder which could be the source but still...

cнŝdk · Accepted Answer · 2016-05-02 14:37:44Z

0

You need to append element with html to show on web page.

Add HTML

    <div id="div1">

    </div>

And Update your Javascript

    var div = document.createElement('div');
        div.id='mainplugindiv';
        div.style.width = '100%';
        div.style.height = '150px';
        div.style.background = '#313192';
        div.style.color = 'white';

        div.innerHTML = "<iframe src=\"test.html\"><p>test</p></iframe>"; //not working

        var element = document.getElementById("div1");

        element.appendChild(div);

edited May 2, 2016 at 14:37

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

answered May 2, 2016 at 12:56

Jitendra Tiwari

1,6913 gold badges16 silver badges28 bronze badges

Collectives™ on Stack Overflow

how to replace innerHTML with an external (but local) file

4 Answers 4

3 Comments

3 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related