Get Value from localStorage and append to iframe URL

Question

I'm trying to retrieve a value from localStorage and append it into an iframe URL and then write that out onto the page.

I'm trying to render the iframe with document.write but I don't think I'm doing it correctly.

Here's what I have so far:

<script>
  jQuery(document).ready(function($) {
      $( ".postid-192" ).load(function() {
          var email = localStorage.getItem("email");
          document.write('<iframe src="http://www2.site.com/l/123/2009-04-28/ABCDE?email=' + email + ' width="1" height="1"></iframe>');
      });
  });
</script>

I guess I'm kinda confused on what document.write should do? I kinda got the impression that it would write out on the page...somewhere. But I might be going about this incorrectly. Overall, I'm trying to get value (in this case email) and just append it into the iframe URL and then have that placed on the page somewhere. I hope that makes sense.

Answer 1

The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML.

So don't use document.write . This code is correct:

<script>
$(document).ready(function() {
    $(".postid-192").load(function() {
        var email = localStorage.getItem("email");
        $("#iframe").html('<iframe src="http://www2.site.com/l/123/2009-04-28/ABCDE?email=' + email + '" width="1" height="1"></iframe>');
    });
});
</script>

And HTML:

<div id="iframe"></div>

Answer 2

The correct way to append a iframe:

var i=document.createElement('iframe');
i.src= 'http://www2.site.com/l/123/2009-04-28/ABCDE?email=' + email;
i.width=1;
i.height=1;
document.body.appendChild(i);