Opening URL from link into iframe

Question

I have iframe created and it has no src at the beginning. When I click on a link, for example, the result from Google search, that link should try to open in that iframe. Not in the tab that I am currently browsing.

$(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');

    $("a").click(function(e) {
        $("#frame1").attr("src", window.location.protocol + '//' + window.location.host +  $(this).attr("href"));
        return false;
    })

});

What I expect is to open that url ( I concated the protocol host and url ), it just does not open.

Element status before clicking on link:

And element status after clicking on link:

How to fix this? Any way around it?

Edit part:

This is what im getting periodically in console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://accounts.google.com/ServiceLogin?passive=1209600&osid=1&continue=https://notifications.google.com/u/0//idv2&followup=https://notifications.google.com/u/0//idv2&authuser=0. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Many sites have frame busters that don't allow you to open them in an iframe — charlietfl, Dec 08 '17 at 15:51
Try `$("#frame1").attr("src", this.href);` That value is an absolute Uri, rather than whatever was in the href attribute in the tag. — Reinstate Monica Cellio, Dec 08 '17 at 15:55
@Archer Nope. It still did not open. Gives the same kind of response as the picture above. — Learn on hard way, Dec 08 '17 at 16:01
@charlietfl I tried, and Wikipedia page should open in iframe when I am on Google page. — Learn on hard way, Dec 08 '17 at 16:06
Okay, for Google search results you need to get the `data-href` value. What you're seeing is correct, if you view the links in the search results. — Reinstate Monica Cellio, Dec 08 '17 at 16:13
@Archer It has data-chref and still does not work. Did it worked for you? — Learn on hard way, Dec 08 '17 at 16:35

score 0 · Accepted Answer · answered Dec 08 '17 at 19:10

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.

jasinth premkumar · Answer 2 · 2017-12-09T09:26:18.330

-1

you can simply achieve it in html

here try this

<iframe height="300px" width="100%" src="" name="iframe_a"></iframe>

<p><a href="https://www.stackoverflow.com" target="iframe_a">stackoverflow.com</a></p>

you cant get to target because. it writes src as "yourwebsie.com+src"

in jquery:

  $(document).ready(function(){
    $("a").click(function(){
    var k=$(this).attr("src"))
        $("iframe").attr("src",k);
    });
});

javascript method:

<script>
 function loadIframe(iframeName, url) {
    if ( window.frames[iframeName] ) {
        window.frames[iframeName].location = url;   
        return false;
    }
    return true;
}</script>

<a href="link" onclick="return loadIframe('ifrm', this.href)">whasjjjf</a>
    <iframe name="ifrm" id="ifrm" src="tabs.html" frameborder="0">
    Your browser doesn't support iframes.</iframe>

edited Dec 09 '17 at 09:26

answered Dec 08 '17 at 16:09

jasinth premkumar

1,430
1
12
22

Maybe you should look at getting info from sites other than w3schools, they are known to be wrong on a bunch of occasions. – Luca Kiebel Dec 08 '17 at 16:13
I tried `$("a").click(function(e) { $(this).attr('target', 'frame1') return false; })` but no luck – Learn on hard way Dec 08 '17 at 16:19
no it should be `$(this).attr('target', 'iframe_a')` `iframe_a `is name of the tag – jasinth premkumar Dec 08 '17 at 16:29
really! @Luca . – jasinth premkumar Dec 08 '17 at 16:33
really? Yeah, really – Luca Kiebel Dec 08 '17 at 16:34
Im losing you. Can you please provide the code that worked for you? – Learn on hard way Dec 08 '17 at 16:36
use name of the iframe tag in jquery. what about the first one HTML? – jasinth premkumar Dec 08 '17 at 16:37
@jasinthpremkumar Any luck so far? – Learn on hard way Dec 08 '17 at 16:52
why you didn't try html method? on process – jasinth premkumar Dec 08 '17 at 16:53
Im not the one who is creating the html. I just click on already created links and from there this script comes up. It is javascript problem. Ok, great. – Learn on hard way Dec 08 '17 at 16:55
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/160812/discussion-between-learn-on-hard-way-and-jasinth-premkumar). – Learn on hard way Dec 08 '17 at 17:10

Opening URL from link into iframe

2 Answers2