PDA

View Full Version : MIF2.0: Link interception after non-intercepted navigation



ShadowZero3000
28 Sep 2009, 2:47 PM
First: I apologize if this is posted in the incorrect thread, I thought it most appropriate.
Second: Yes, I HAVE searched, quite thoroughly, through the forums and the interwebs in general, and A: Haven't found anyone with my exact issue and B: Haven't found a workaround or solution.

I have created an example page to illustrate the issue I am having, and am not sure if this is due to a design limitation, or if it is a mistake on my part. The example page is an over-simplified version of the MIF2.0 example of link interception.

Problem: When using managed iframes, link interception ceases to work (and related events do not fire) after navigating within the iframe to another page.
This only occurs if you wish to have context based interception (Catch "_blank" or "_other" targets, and not "" targets).

What I am trying to do: I want to incorporate link interception into an existing framework using a tabpanel of managed iframes. For links that would otherwise open in a new tab ("_blank" or "_other") I want the framework to intercept and deliver the href to a new iframe tab. However for normal links without targets, I want them to remain within the same tab. Link interception works fine until you change pages, at which point the managed iframe appears to no longer be capable of intercepting links, and I'm not sure why.

For the example: Any links labelled "Page # _other" SHOULD open into a new iframe tab, and if you do this from the initial page it will do just that.
Any links simply labelled "Page # normal" SHOULD open within the same tab as you see them in.
After following a "Page # normal" link, attempt to follow a "Page # _other" link, and you will see that it opens in another browser window.

Example: http://pureinsomnia.com/ext_mif_test/index.html

If you need a code example, I could post it, but it's really just as easy to grab it from the example's source.

What I've tried: Difficult to say, I've tried listeners in various places, I've tried catching normal links and manually changing page source to the link location, but that breaks individual iframe histories (must be retained). I'll try to pin down what else I've tried, but I've been at it for hours.

Thanks!
~Josh

Animal
29 Sep 2009, 1:05 AM
Collect an Array of the <a> elements which have a non-blank target:



var linkEls = Ext.DomQuery.select('a[target!=""]', m.frameEl.dom.contentDocument);


Process them to call a common function which stops the event, and then does whatever:


for (var i = 0, l = linkEls.length, i < l; i++) {
Ext.fly(linkEls[i]).on("click", handleFrameLinkClick);
}

ShadowZero3000
29 Sep 2009, 7:29 AM
Animal, you are a genius!
Thanks so much for your assistance, I can finally move on in this project!

For anyone that comes upon this later, I implemented the code he mentioned within the documentloaded event, so that once loaded, all links are given a listener.

Thanks again!
~Josh

queej
12 Nov 2009, 10:39 AM
Can you share a bit of that code? I am trying to make sure that all links opened within a tab in a TabPanel open themselves within the tab. (The links are outside my control.)

ShadowZero3000
16 Nov 2009, 1:55 PM
Sorry for the delay, here is the entire original code:
iframes.js-

Ext.onReady(function(){

var p = new Ext.Panel({renderTo:'testbody',title:'test',layout:'border',
width: 800,
height:500,
items:[
{ xtype :'tabpanel',
id : '-center',
activeTab : 0,
region : 'center',

layoutOnTabChange : true,
defaults : {
xtype : 'iframepanel',
hideMode : 'nosize',
autoScroll : true,
focusOnLoad : Ext.isIE, //some external sites use document.createRange
closable : true,

listeners : {
domready : function(frame){ //raised for "same-origin" frames only
var MIF = frame.ownerCt;

if(frame.getDoc()){
MIF.mon(frame.getDoc(), 'click', p.interceptLinks, p, {delegate:'a[target]'});
}
},
scope : this
}
}
}],
interceptLinks : function(e,targetEl){

var tabs = Ext.getCmp('-center');
if( targetEl && tabs && e.button == 0 && targetEl.getAttribute('target')=="_other"){
var title = targetEl.getAttribute('title'),
href = targetEl.getAttribute('href'),
idKey = 'dynaTab-' + title;
e.stopEvent(); //prevent the default action of the link
tabs.setActiveTab(
tabs.getItem(idKey) || tabs.add({
xtype : 'iframepanel',
//iconCls : 'loading-indicator',
id : idKey,
defaultSrc : href,
title : title || 'Unknown Document' ,
loadMask : {msg : 'Loading Intercepted Link...'}
})
);
}
}
});
p.items.itemAt(0).setActiveTab(p.items.itemAt(0).add({title:'Initial Page',defaultSrc:'page1.html'}));
});With matching html:
index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="js/ext-3.0.0/resources/css/ext-all.css (http://www.extjs.com/forum/view-source:http://pureinsomnia.com/ext_mif_test/js/ext-3.0.0/resources/css/ext-all.css)" />
<script type="text/javascript" src="js/ext-3.0.0/adapter/ext/ext-base.js (http://www.extjs.com/forum/view-source:http://pureinsomnia.com/ext_mif_test/js/ext-3.0.0/adapter/ext/ext-base.js)"></script>
<script type="text/javascript" src="js/ext-3.0.0/ext-all-debug.js (http://www.extjs.com/forum/view-source:http://pureinsomnia.com/ext_mif_test/js/ext-3.0.0/ext-all-debug.js)"></script>
<script src="js/mif-2/build/miframe.js (http://www.extjs.com/forum/view-source:http://pureinsomnia.com/ext_mif_test/js/mif-2/build/miframe.js)"></script>

<script type="text/javascript" src="iframes.js (http://www.extjs.com/forum/view-source:http://pureinsomnia.com/ext_mif_test/iframes.js)"></script>

</head>
<body class="xtheme-gray">
<div id="testbody" style="margin:20px"></div>
</body>
</html>page1.html


You are on Page 1<br>
<a href="page2.html (http://www.extjs.com/forum/view-source:http://pureinsomnia.com/ext_mif_test/page2.html)" title="Page 2" target="_other">Page 2 _other</a>
<a href="page3.html (http://www.extjs.com/forum/view-source:http://pureinsomnia.com/ext_mif_test/page3.html)" title="Page 3" target="">Page 3 normal</a> page2.html


You are on Page 2<br>
<a href="page1.html (http://www.extjs.com/forum/view-source:http://pureinsomnia.com/ext_mif_test/page1.html)" title="Page 1" target="_other">Page 1 _other</a>
<a href="page3.html (http://www.extjs.com/forum/view-source:http://pureinsomnia.com/ext_mif_test/page3.html)" title="Page 3" target="">Page 3 normal</a> page3.html


You are on Page 3<br>
<a href="page1.html (http://www.extjs.com/forum/view-source:http://pureinsomnia.com/ext_mif_test/page1.html)" title="Page 1" target="">Page 1 normal</a>
<a href="page2.html (http://www.extjs.com/forum/view-source:http://pureinsomnia.com/ext_mif_test/page2.html)" title="Page 2" target="_other">Page 2 _other</a> Suggested fix is to add the following to the original js:


listeners:{
documentloaded: function(frame){ //only raised for "same-origin" documents?
try {
if (frame.domWritable()) {
var linkEls = Ext.DomQuery.select('a[target!=""]', frame.dom.contentDocument);
//alert(linkEls);
for (var i = 0; l = linkEls.length, i < l; i++) {
Ext.fly(linkEls[i]).on("click", viewport.interceptLinks);
}
}
}
catch(err)
{ //Couldn't access the document

}



This ended up adding a known bug to my code, as this was wrapped within a portal framework. In rare cases, upon attempting to close the containing mif panel, some of the added listeners could not be removed, causing the close event to fail, and leaving an unclosable portal tab. Better to have this functionality than not, so we will live with the known bug for now.

Enjoy