links within an iframe window to open in new tab

Question

I have seen this question many times, and a lot of the answers seem to suggest the base target="_blank" technique. However, I have used this before in the past; but my current page it does not work. I also don't think it could be best option even if it did work; as I ONLY want the links within the iframe src="" to open in a new window. I am hopping there's a simple solution I can add inline to the page. I have also tried adding an id as below, and using JavaScript, still nada.

<iframe src="mywordpressfeed.html" id="frame1" width="310" height="380"></iframe>

JS

$(document).ready(function(){
    $("#frame1").attr("target","_blank");
});

Basically the goal is to when a user sees my wordpress feed within the iframe I have on a static page; once the post title is clicked it loads in a new window - as now it loads within the same iframe so there isn't an increased level of readability.

`"target"` is an attribute of the anchor tag, not the iframe tag. — Andbdrew, Jun 15 '13 at 23:39
Can you not edit your Wordpress theme/code/feed to give hyperlinks the target="_blank" option? — adaam, Jun 15 '13 at 23:41
Thanks for the response @adaam but no, because when users are there I don't want it to be a new page per post click. Only on the splash homepage where I have the iframe. — Dr Upvote, Jun 15 '13 at 23:46

score 2 · Accepted Answer · answered Jun 16 '13 at 18:08

2

There is no real solution to this, due to the iFrame tag being developed for the opposite.

answered Jun 16 '13 at 18:08

Dr Upvote

8,023
24
91
204

score 1 · Answer 2 · edited May 23 '17 at 12:32

1

//pass the iframe to this iframe getting function 
    function iframeRef( frameRef ) {
        return frameRef.contentWindow ? frameRef.contentWindow.document : frameRef.contentDocument
    }
//Get Iframe
    var inside = iframeRef( document.getElementById('iframeID') );
//Get all links
    var links = inside.getElementsByTagName('a');
//Loop throught links and set their attributes
    for (var i = 0 ; i<links.length ; i++){
    links[i].setAttribute('target','_blank');
    }
//No jQuery needed!

thanks to meder

EDIT Due to iframe same source restrictions I had to find a website with inner iframe from same source so you can paste this code

//pass the iframe to this iframe getting function 
    function iframeRef( frameRef ) {
        return frameRef.contentWindow ? frameRef.contentWindow.document : frameRef.contentDocument
    }
//Get Iframe
    var inside = iframeRef( document.getElementById('IFwinEdit_Gadget_247730_3349') );
//Get all links
    var links = inside.getElementsByTagName('input');
//Loop throught links and set their attributes
    for (var i = 0 ; i<links.length ; i++){
        links[i].setAttribute('style','background:red');
    }
//No jQuery needed!

to the console in this web site and see the inputs change color

edited May 23 '17 at 12:32

Community

1
1

answered Jun 15 '13 at 23:49

raam86

6,785
2
31
46

Wow, this looks amazing @raam86 but still no such luck =/ – Dr Upvote Jun 16 '13 at 00:06
Anything else I should be including here? Cheers. – Dr Upvote Jun 16 '13 at 00:07
post some HTML for more assitance also paste the console error – raam86 Jun 16 '13 at 00:10
Thanks a ton again, @raam86 you are the man. The only relevant HTML is the iframe markup in the original post. I am however getting a console error with both codes stating "error: document.getElementById(...)" is null. – Dr Upvote Jun 16 '13 at 00:33
are you using frame1 as frameref? also notoce crosd web site restrictions – raam86 Jun 16 '13 at 00:40
I'm starting to get the feeling there is no real solution to this. – Dr Upvote Jun 16 '13 at 02:57

links within an iframe window to open in new tab

2 Answers2

Linked