Demos | Javascript | HTML | Tutorials

David Carr

Dynamically set iframe properties with jQuery

Using jQuery it’s possible to pass properties to set the src, width and height of an iframe from a series of links. 

Give the links a class for jQuery to read and set data properties, you can call these anything but using the named properties makes sense so set data-src, data-width and data-height. 

<a class="item" data-src="http://domain.com" data-height="350" data-width="100%">Link</a>

Next the jquery (this snippet assumes you’ve already included jquery).

Looking for click events the class item is looked for then the data attributes are collected by using $(this).att(data-src) the data-src must match what’s set in the link, in the below snippet the width and height has a set value for cases where no width and height has been set.

Then the iframe inside #itemcontent is identified and the properties are applied.

$('a.item').on('click', function(e) {
  var src = $(this).attr('data-src');
  var height = $(this).attr('data-height') || 300;
  var width = $(this).attr('data-width') || 400;
  $("#itemcontent iframe").attr({'src':src,'height': height,'width': width});
});

Finally have the div with an iframe.

<div id='itemcontent'>
    <iframe></iframe>
</div>

 

Domains are often purchased from multiple providers, keeping track of where a domain is and its DNS settings can be tricky. Domain Mapper solves this by listing all your domains in one place. View your DNS settings and receive reminders to renew your domains. Try it today.

Support my work by donating with PayPal.

Subscribe to my newsletter

Subscribe and get my books and product announcements.

© 2009 - 2021 DC Blog. All code MIT license. All rights reserved.