View Full Version : embeding iframe on a subpanel, but href of iframe loaded on whole page not subpanel

24 Nov 2007, 11:25 AM

i embeds a url as iframe on a subpanel, but href of the iframe loaded did not load on the subpanel, instead, whole page loaded with that href. any suggetion for limiting href within
the subpanel ?



24 Nov 2007, 11:35 AM
You have to post your code, can't tell much based on that description.

24 Nov 2007, 11:54 PM
var subPanel = new Ext.Panel({

// fcn for wrapping url for iframe
function wrapIFrame(url){
return '<iframe style=\'width: 100%; height: 100%; border: none;\' src=\'' + url + '\'></iframe>';

var URL = 'www.yahoo.com';
function UpdateTrackContent(p, URL, IsIframe){
var url2use;
url2use = wrapIFrame(URL);

subPanel is inside another panel that is child of ViewPort, yahoo page is loaded
Ok, but when Clicking a link at yahoo page rendered on the subPanel, the linked yahoo
page is rendered onto the my whole html pager instead, I would like to have the
linked yahoo page rendered onto the subPanel only. how can I get there ?


25 Nov 2007, 5:31 AM
As this is not an Ext issue, I'll just add: Since you don't own the Yahoo page content, you'll have no control over the behavior of Yahoo's <a> tags.

25 Nov 2007, 12:43 PM
can Ext have a mechanism to prevent any event at the subpanel to not go beyond the subpanel, or in otherwords, make yahoo page 'believe' the subpanel is the html page main windoiw ?

25 Nov 2007, 8:42 PM
It might be helpful to post what you've got and explain exactly how you want each iframe to behave.

26 Nov 2007, 12:46 AM
i have layout at my main html page, center region in ViewPort host dynamically loadable subPanel, when a page like Yahoo home page is rendered to a subpanel via iframe, clicking any linking will render a html page from that linking onto my main html page rather than the subpanel hosting Yahoo page.

obvious issue is that Ext has any mechanism to let embed Yahoo page 'believe' the subpanel
is my main page so that any new page from clicking href link will be rendered onto my subpanel only rather than my mian html page.

26 Nov 2007, 4:04 AM
I do not believe that will be possible.

Iframes, whose pages are loaded from foreign domains, do not permit access to the document object in such a way that would permit setting event listeners on those <a> links.

26 Nov 2007, 4:34 AM
A workaround to control elements in embedded foreign pages: use a proxy script in your own server (e.g. using PHP). The script fetches the foreign pages and forwards them to the browser, which displays them as content for a panel's body. From the browser's perspective, now this content is coming from the same domain as your app, and so JS can manipulate any element in the "page". Can be tedious to get it right, specially when those foreign pages include scripts and css (as is usually the case), and thus only recommended if it's really needed.

26 Nov 2007, 10:52 AM
Actually there is one way to do it that works if your panels don't overlap. You can instantiate the browser control itself (IWebBrowser) using an <object> tag. Example:

<script type="text/javascript">
function on_load()
var obj = document.getElementById("foo");



<body onload="on_load();">
<object id="foo" width="100%" height="100%" classid="clsid:8856F961-340A-11D0-A96B-00C04FD705A2"></object>

This example is obviously IE specific, but the same thing can be done in FF with the <browser> tag.

Make this page the target of your <iframe> and load the target URL in the on_load function.

Note that this solution only prevents the targeted site from replacing 'top' content. You still don't have access to the DOM if the target site is cross-domain.

27 Nov 2007, 10:45 AM
how can I get the classid ?