Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Iframe / Javascript

Opening Different Iframe Depending On Different Button Click

Post a Comment
i am trying to open different iframe windows by assigning iframe src to a variable , when the page initially loads it should show only two buttons on the page , when i click on the

Solution 1:

You just need to change the src attribute of the iframe on click. I added the src to the buttons usind the data attribute. Here is the example http://jsfiddle.net/8wLm42ns/2/ The HTML

    <button class="loadiframe"id="b1" data-src="http://jquery.com/" data-width="500" data-height="400">Button 1</button>
<button class="loadiframe"id="b2" data-src="http://sitepoint.com" data-width="650" data-height="350">Button 2</button>

<iframe id='frame' frameborder="0" scrolling="no" width="500" height="400">

jQuery

$('.loadiframe').on('click', function(){
    var src = $(this).data('src'),
        width = $(this).data('width'),
        height = $(this).data('height');
    $('#frame').css({
        width: width,
        height: height
    }).attr('src', src);
});

For javascript solution try this http://jsfiddle.net/8wLm42ns/3/

The HTML

<divclass="loadiframe"><buttonid="b1"data-src="http://jquery.com/"data-width="500"data-height="400">Button 1</button><buttonid="b2"data-src="http://sitepoint.com"data-width="650"data-height="350">Button 2</button></div><iframeid='frame'frameborder="0"scrolling="no"width="500"height="400">

javaScript - add in head section

functioniframeChange() {
    var buttons = document.querySelector(".loadiframe"),
        iframe = document.getElementById('frame');

    buttons.addEventListener("click", function (e) {
        iframe.src = e.target.dataset.src;
        iframe.width = e.target.dataset.width;
        iframe.height = e.target.dataset.height;
    });
}
window.onload = iframeChange;

Solution 2:

Try this solution, at click on a button you load the webpage on a specific iframe, no jquery required.

JSBIN here http://jsbin.com/gebelatomiya/1/

<!doctype html><html><head><script>functionloadFrame (elm){
    var frame1 = document.getElementById('frame1');
    frame1.src = elm.dataset.src;
}
</script></head><body><buttonid="b1"data-src="http://www.w3schools.com"onClick="loadFrame(this)">Button 1</button><buttonid="b2"data-src="http://www.sony.com"onClick="loadFrame(this)">Button 2</button><iframeid="frame1"scrolling="no"></iframe></body></html>

Post a Comment for "Opening Different Iframe Depending On Different Button Click"