jquery iframe a links into new div / tab / window?

Question

I have a tricky question.

All pages are within same server / portal.

I have a page that embeds iframe from the other page using the following code:

$('#mydiv').append('<p id="loading">Loading ...</p>');
$('#mydiv').append('<iframe id="myframe" name="myframe" class="myframe" onload="myframe()" style="display:none;"></iframe>');
$('#myframe').attr('src', 'https://mywebsite.com/page2');

function myframe() {
var $myframesearch =  $('#myframe').contents(); 
$myframesearch.find("a").attr('target','_parent');
}

$('#myframe').load(function(){
$('#loading').remove(); 
$('#myframe').fadeIn();
});

All of the links within iframe have no href (but href="javascript:void(0)") and uses scripts within iframe to process the action dynamically.

Some links does open in new window some does not.

I would like to force all links to either open in new Tab, Window, or append to new Div, but none of the methods work, like base / parent, onclick / new window, _top, _parent, etc.

However, my idea was to hide and wait till the content of iframe is loaded after a click and then to append loaded content in new hidden div and then fade it in. When doing so the loaded iframe content resets back to default and not with new content.

Does anyone knows how this can be solved?

Thank you all!

Alexander Alexander · Accepted Answer · 2014-12-10T16:13:59

So I check and it appears that other JavaScript overwrites the "a" tag action with some "data" field in the tag only for the "a" tags that contain "Open:" in their link.

I found solution to the problem below by the link for this "a" tag from another page bypassing the JavaScript overwriting:

$(function(){

$('#mydiv').append('<p id="loading">Loading ...</p>');
$('#mydiv').append('<iframe id="myframe" name="myframe" class="myframe" src="https://mywebsite.com/page2" onload="myframe()" style="display:none;"></iframe>');

$('#myframe').load(function(){ 
$('#loading').hide(); 
$('#myframe').fadeIn(); 
});

$('<div id="popup" style="display:none; width:1px; height:1px; position:absolute; top:0; left:0;"></div>').appendTo('html');

});

function myframe() {
var $myframesearch =  $('#myframe').contents(); 
$myframesearch.find("a").attr('target','_parent');
$myframesearch.find('a:contains("Open:")').on('click',function(){
$(this).attr('data','');
var $texta = $(this).text();
var $text = $texta.replace(/Open: /,"");

$('#popup').load('https://mywebsite.com/page2'  + ' a:contains("'+$text+'")', function(){
$('#popup a').each(function(){
this.href = this.href.replace(/https:\/\/mywebsite\.com\/page2\/a/, "https://mywebsite.com/page2");
 this.click();
});
});

});
}

Hope this helps :)

jquery iframe a links into new div / tab / window?

1 Answers