0

iframe without an src attribute. I want to set the div inside iframe without src but it seems difficult for me. My html code is 

<div class="demo-wrapper">
  <iframe src="">
    <div>
      <p>Hello World</p>
      <p>Hello World</p>
      <p>Hello World</p>
      <p>Hello World</p>
      <p>Hello World</p>
      <p>Hello World</p>
      <p>Hello World</p>
      <p>Hello World</p>
      <p>Hello World</p>
    </div>
  </iframe>
</div>
Brad Larson
  • 170,088
  • 45
  • 397
  • 571
Hitesh Chauhan
  • 87
  • 2
  • 4
  • 13
  • Possible duplicate of [Inserting a div element inside of an iframe](http://stackoverflow.com/questions/29571365/inserting-a-div-element-inside-of-an-iframe) – Luuk Skeur Aug 10 '16 at 12:02
  • Also possible duplicate of [Insert content into iFrame](http://stackoverflow.com/questions/21795761/insert-content-into-iframe) – spoq Aug 10 '16 at 12:03
  • Why would you want to do this? an Iframe is meant to insert a piece of another website inside yours. An empty (no src) iframe is useless. – Luuk Skeur Aug 10 '16 at 12:03
  • @LuukSkeur i will use it a scrollspy or scrollbar – Hitesh Chauhan Aug 10 '16 at 12:08

1 Answers1

1

Can be achieved using JavaScript. Check below example.

var html = document.getElementById("iframeCont").innerHTML;
var iframe = document.getElementById("myiframe");
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
<div class="demo-wrapper">
  <iframe id="myiframe" src="">
  </iframe>
  <div id="iframeCont" style="display: none">
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
  </div>
</div>
Pugazh
  • 9,453
  • 5
  • 33
  • 54
  • Is there a typo in the result? This code is outside of the iframe, not in it as the OP requested... – patrick Aug 10 '16 at 13:35
  • @patrick : The code outside is just a container to hold the data. It's been copied to the iframe using JS. – Pugazh Aug 10 '16 at 14:00