Do you want to learn how to create an iframe generator tool? We will show How to Create an iFrame Generator Tool in jQuery. stay with us.
In this article, We will create a JavaScript’s project. This article is about those people who are at the beginner level or trying to create dynamic JavaScript tools. Let’s create a frontend for our tools.
Create frontend for iframe generator Tools:
We are going to create HTML from the field for tools. At this time HTML5 declares some attributes are deprecated. But, online tools don’t remove those attributes. And Some new attributes come up. We are going to know about those new attributes and create an option field based on new attributes.
Create an index.html file and put this HTML code:
<div class="wpk-iframe-generator"> <div class="container"> <div class="wpk-field-area"> <div class="wpk-option"> <div class="wpk-field"> <label for="iframe-name">Name:</label> <input id="iframe-name" class="form-control" type="text" name="name" placeholder="Enter Iframe Name" value="myiframe"> </div> <div class="wpk-field"> <label for="iframe-width">Width:</label> <input id="iframe-width" class="form-control" type="text" name="width" placeholder="Enter Iframe width" value="600"> </div> <div class="wpk-field"> <label for="iframe-height">Height:</label> <input id="iframe-height" class="form-control" type="text" name="height" placeholder="Enter Iframe height" value="400"> </div> <div class="wpk-field"> <label for="iframe-border">Border:</label> <select id="iframe-border" class="form-control"> <option value="yes">Yes</option> <option value="no">No</option> </select> </div> <div class="wpk-field"> <label for="iframe-border-type">Border Type:</label> <select id="iframe-border-type" class="form-control"> <option value="dotted">Dotted</option> <option value="dashed">Dashed</option> <option value="solid">Solid</option> <option value="double">Double</option> <option value="groove">Groove</option> <option value="ridge">Ridge</option> <option value="inset">Inset</option> <option value="outset">Outset</option> <option value="hidden">Hidden</option> </select> </div> <div class="wpk-field"> <label for="iframe-border-size">Border Size:</label> <input id="iframe-border-size" class="form-control" type="number" name="border-size" placeholder="Border Size PX" value="1"> </div> <div class="wpk-field"> <label for="iframe-border-color">Border color:</label> <input id="iframe-border-color" class="form-control" type="color" name="border-color"> </div> <div class="wpk-field"> <label for="iframe-allow">Allow:</label> <select id="iframe-allow" class="form-control"> <option value="">Empty</option> <option value="fullscreen">Fullscreen</option> <option value="payment">Payment</option> </select> </div> <div class="wpk-field"> <label for="iframe-scrolling">Scrolling:</label> <select id="iframe-scrolling" class="form-control"> <option value="auto">Auto</option> <option value="yes">Yes</option> <option value="no">no</option> </select> </div> <div class="wpk-field"> <label for="iframe-loading">Loading:</label> <select id="iframe-loading" class="form-control"> <option value="">Empty</option> <option value="eager">Eager</option> <option value="lazy">Lazy</option> </select> </div> <div class="wpk-field"> <label for="iframe-referrerpolicy">Referrer policy:</label> <select id="iframe-referrerpolicy" class="form-control"> <option value="">Empty (Recommended)</option> <option value="no-referrer">No referrer</option> <option value="no-referrer-when-downgrade">No referrer when downgrade</option> <option value="origin">Origin</option> <option value="origin-when-cross-origin">Origin when cross origin</option> <option value="same-origin">Same origin</option> <option value="strict-origin">Strict origin</option> <option value="strict-origin-when-cross-origin">Strict origin when cross origin</option> <option value="unsafe-url">Unsafe url</option> </select> </div> <div class="wpk-field"> <label for="iframe-sandbox">Sandbox:</label> <select id="iframe-sandbox" class="form-control"> <option value="">Empty (Recommended)</option> <option value="allow-downloads-without-user-activation">Allow downloads without user activation</option> <option value="allow-downloads">Allow downloads</option> <option value="allow-forms">Allow forms</option> <option value="allow-modals">Allow modals</option> <option value="allow-orientation-lock">Allow orientation lock</option> <option value="allow-pointer-lock">Allow pointer lock</option> <option value="allow-popups">Allow popups</option> <option value="allow-popups-to-escape-sandbox">Allow popups to escape sandbox</option> <option value="allow-presentation">Allow presentation</option> <option value="allow-same-origin">Allow same origin</option> <option value="allow-scripts">Allow scripts</option> <option value="allow-storage-access-by-user-activation">Allow storage access by user activation</option> <option value="allow-top-navigation">Allow top navigation</option> <option value="allow-top-navigation-by-user-activation">Allow top navigation by user activation</option> </select> </div> </div> <div class="wpk-field iframe-url-option"> <label for="iframe-url">Iframe URL:</label> <input id="iframe-url" class="form-control" type="text" name="url" placeholder="Enter Iframe Url"> </div> <div class="iframe-output"> <button class="generate-iframe btn btn-primary" type="submit">Generate</button> <!-- <button class="preview-iframe" type="submit">Preview</button> --> <textarea id="iframe-output-area" class="form-control"></textarea> </div></div></div></div>
Or You can download HTML code from GitHub.
Firstly we know about the most common deprecated attributes. Align, frameborder, longdesc, margin height, margin width, and scrolling are deprecated attributes. We do not use deprecated attributes.
Description about HTML code:
We created 13 different options for our tools like:
- Name: Name is a common attribute. We use an iframe name.
- Width: The width is iframe width in CSS pixels.
- Border: Custom CSS border for inline style.
- Border Type: Custom CSS border type for iframe border.
- Height: The height is iframe height in CSS pixels.
- Border Size: Custom CSS border size for iframe border.
- Border color: You can pick a color for the iframe border.
- Allow: Specifies a feature for iframe, Define your iframe access.
- Scrolling: These deprecated attributes.
- Loading: You can use this option for lazy loading or not.
- Referrer policy: Specifies which referrer information to send when fetching the iframe.
- Sandbox: Enables an extra set of restrictions for the content in an </p>
- Src: The address of the document.
If you want more options, You can comment below or contribute to our GitHub. If you already created an HTML form field. Now we can create our jQuery Scripts.
Create Scripts For iframe Generator Tools:
We use the most common javascript framework jQuery. When the user clicks the Generate button the scripts load all field values and generate an iframe. We load form values by using the val() jQuery function via CSS id attributes. Each form field has a CSS ID. When Load field values are loaded then we update values on Textarea fields.
See the scripts:
// A $( document ).ready() block.
$( document ).ready(function() {
$('.generate-iframe').click(function(){
var name = $('#iframe-name').val();
var width = $('#iframe-width').val();
var height = $('#iframe-height').val();
var border = $('#iframe-border').val();
var border_type = $('#iframe-border-type').val();
var border_size = $('#iframe-border-size').val();
var border_color = $('#iframe-border-color').val();
var allow = $('#iframe-allow').val();
var scrolling = $('#iframe-scrolling').val();
var loading = $('#iframe-loading').val();
var referrerpolicy = $('#iframe-referrerpolicy').val();
var sandbox = $('#iframe-sandbox').val();
var url = $('#iframe-url').val();
var name_html = ($('#iframe-name').val())? 'name="'+name+'" ':'';
var width_html = ($('#iframe-width').val())? 'width="'+ width +'" ':'';
var height_html = ($('#iframe-height').val())? 'height="'+ height +'" ':'';
var allow_html = ($('#iframe-allow').val())? 'allow="'+allow+'" ':'';
var scrolling_html = ($('#iframe-scrolling').val())? 'scrolling="'+scrolling+'" ':'';
var loading_html = ($('#iframe-loading').val())? 'loading="'+loading+'" ':'';
var referrerpolicy_html = ($('#iframe-referrerpolicy').val())? 'referrerpolicy="'+referrerpolicy+'" ':'';
var sandbox_html = ($('#iframe-sandbox').val())? 'sandbox="'+sandbox+'" ':'';
var style_css = (border == 'yes')? 'style="border: '+border_size+'px '+border_type+' '+border_color+' " ':'';
$('#iframe-output-area').val('<iframe src="'+ url +'" '+name_html+width_html+height_html+allow_html+scrolling_html+loading_html+referrerpolicy_html+sandbox_html+style_css+'></iframe>');
});
});If You have basic knowledge about jQuery. You can already understand, our tool is already working. You can download our full HTML code from GitHub. Link below.
Conclusion:
Iframe generator is not the most useful tool but if you started learning JavaScript’s. You want to create a tool using JavaScript. JavaScript’s are the most useful for creating tools. We Think you already know How to Create an iframe Generator Tool in jQuery.
We hope you enjoy our article. Also, You already created an iframe generator tool. If you have any problem understanding this simple code we will help you please comment below.
Related Link:
