Open Link in Iframe

how to open different URLs in iframes using JavaScript and HTML buttons

You just need to get the iframe element with Javascript and change the src attribute
The question has already been answered here : https://stackoverflow.com/a/6001043/7988438

var frame = document.getElementById("frame");
var btn1 = document.getElementById("btn1");var btn2 = document.getElementById("btn2");var btn3 = document.getElementById("btn3");
btn1.addEventListener("click",link1)btn2.addEventListener("click",link2)btn3.addEventListener("click",link3)
function link1(){  frame.src="https://pixabay.com/photo-2845763/"}function link2(){  frame.src="https://pixabay.com/photo-3126513/"}function link3(){  frame.src="https://pixabay.com/photo-3114729/"}

<button id="btn1" >link1</button><button id="btn2" >link2</button><button id="btn3" >link3</button><iframe id="frame" src="https://pixabay.com/photo-2845763/"></iframe>

How to open a iframe link within the same iframe?

You should specify target name of the iframe.

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_a">www.google.com</a></p>

How to force link from iframe to be opened in the parent window

I found the best solution was to use the base tag. Add the following to the head of the page in the iframe:

<base target="_parent">

This will load all links on the page in the parent window. If you want your links to load in a new window, use:

<base target="_blank">

Browser Support

Opening URL from link into iframe

Kinda worked out what I wanted. For everyone who wants to see its here:

$(document).ready(function () { 

    $('<div />', {
        id: 'firster',
        style: 'position: fixed; top: 0; bottom: 0; right: 0; max-width: 500px; z-index: 120;'
    }).appendTo('body');

    $('<iframe />', {
            name: 'frame1',
            id: 'frame1',
            src: ''
        })
        .css({
            'height': '100%',
            'width': '450px'
    }).appendTo('#firster');

    function loadIframe(iframeName, url) {
        if ( window.frames[iframeName] ) {
            window.frames[iframeName].location = url;   
            return false;
        }
        return true;
    }
    $("a").click(function(e) {
        $("#frame1").attr("src", decodeURIComponent($.urlParam('url', $(this).attr("href")))); // no prepend of current URL, just use the href directly

        return false;
    })

    $.urlParam = function (name, urlItself) {
        var results = new RegExp('[\?&]' + name + '=([^&#]*)')
                          .exec(urlItself);

        return results[1] || 0;
    }

   // console.log($.urlParam('url', urlItself)); //registration

});

I am sure that this will work on Googles search-result links and not quite sure if it is scalable but it works for my original purpose. Also, big thanks to everyone who contributed on this issue.

---

Related Topics