Step-by-step Guide to Detect Text Input and Create a Iframe to Display Url in JavaScript: AutoViewerIframe.js for Beginners

AutoViewerIframe.js is a javascript library for detecting text field, it will create a iframe to display url when a url typed. In this tutorial, we will implement it with some steps.

View live demo

How to detect input and view url using AutoViewerIframe.js?

1.Import autoViewerIframe.js

<script src="autoViewerIframe.js" type="text/javascript"></script>

2.Create a text input field to enter a url

<input id="input_example" 
      type="text" onload="$autoViewerYoutube.bind(this);" 
      data-container-id="container_view_id" 
      class="form-control" 
      placeholder="Paste Your link here..." />

3.Create a div to contain a iframe to display url

<div id="container_view_id"></div>

4.Bind an event when web page is overloaded

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function(event) { 
  			//Example
  			$autoViewerYoutube.bind(document.getElementById("input_example"));
    });
  </script>

As to AutoViewerIframe.js, it only allow to open yutube.com url, if you plan to make it open any url, you should modify it.

Modify AutoViewerIframe.js to open any url

Edit options

options:{
      regexs:[
        {
          condition: /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/,
          embed:""
        }
      ],
      
    }

Set  url2 variable to:

var url2 = window.$autoViewerYoutube.options.regexs[index].embed + match[0];