Hitesh Chauhan Hitesh Chauhan - 3 months ago 17
CSS Question

How to set div inside iframe without an src attribute?

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>




Answer

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>