Update And Create The Iframe Element With Content Using JavaScript

This tutorial will explain how to update / change / modify the existing Iframe element content and how to create dynamic iframe element with content using JavaScript.

Let’s start the tutorial. First we start with update iframe document content and later see how to create iframe on the go (Dynamically)

how to change the content of iframe dynamically?

Below tutorial will explain how to change iframe content dynamically and find the demo link and download the source code below.

Html Code

Copy below textbox in to your html page which has the content that goes into iframe content.

<textarea id="iframe1" name=code>
<!doctype html>
<html>
  <head>
    <meta charset=utf-8>
    <title>I'm loading inside existing iframe</title>
    <style>p {font-family: monospace;}</style>
  </head>
  <body>
    <p>I'm inside existing iframe document</p>
    <canvas id=pane width=200 height=100></canvas>
    <script>
      var canvas = document.getElementById('pane');
      var context = canvas.getContext('2d');

      context.fillStyle = 'rgb(250,0,0)';
      context.fillRect(10, 10, 55, 50);

      context.fillStyle = 'rgba(0, 0, 250, 0.5)';
      context.fillRect(30, 30, 55, 50);
    </script>
  </body>
</html>
</textarea>

Iframe Code

Copy the below iframe code into your html page.

<iframe id="iframePreview"></iframe>

Update button

Copy below button code to your html page. Onclick will call the update javascript function which in below topic.

<button onclick="updateIframe()">Update</button>

JavaScript function change the iframe content

Below JavaScript function will update and replace the iframe content.

function updateIframe() {
	var editorVal = document.getElementById("iframe1").value;
	var iframePreview = document.getElementById('iframePreview');
	var previewIframe =  iframePreview.contentDocument ||  iframePreview.contentWindow.document;
	previewIframe.open();
	previewIframe.write(editorVal);
	previewIframe.close();
};

Download Demo

How to create an iframe using JavaScript?

Below tutorial will explain how to create iframe dynamically with content and find the demo link and download the source code below.

HTML Code

Copy the below textbox in to your html page which has the content that goes into dynamically created iframe content.

<textarea id="iframe2" name=code>
<!doctype html>
<html>
  <head>
    <meta charset=utf-8>
    <title>I'm inside dynamically created iframe</title>
    <style>p {font-family: monospace;}</style>
  </head>
  <body>
    <p>I'm inside created iframe document</p>
    <canvas id=pane width=200 height=100></canvas>
    <script>
      var canvas = document.getElementById('pane');
      var context = canvas.getContext('2d');

      context.fillStyle = 'rgb(250,0,0)';
      context.fillRect(10, 10, 55, 50);

      context.fillStyle = 'rgba(0, 0, 250, 0.5)';
      context.fillRect(30, 30, 55, 50);
    </script>
  </body>
</html>
</textarea>

Iframe wrapper

Copy the below code which will hold the dynamic iframe content which is created by the below JavaScript function (Next topic)

<div id="iframewrapper"></div>

Create iframe element Dynamically

Below function will create the iframe element dynamically

function createIframe(){
    var text = document.getElementById("iframe2").value;
    var ifr = document.createElement("iframe");
    ifr.setAttribute("frameborder", "0");
    ifr.setAttribute("id", "iframeOutput");  
    document.getElementById("iframewrapper").innerHTML = "";
    document.getElementById("iframewrapper").appendChild(ifr);
    var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument;
    ifrw.document.open();
    ifrw.document.write(text);
    ifrw.document.close();
};