PDA

View Full Version : [FIXED-1122] Ext.History doesn't work as expected in an <iframe>



papandreou
14 Jul 2010, 4:13 AM
Hi!

I'm trying to put a history-aware ExtJS application into an iframe in order to show a preview of it inside another application. That turns out not to work very well, because the Ext.History instance living in the iframe monitors top.location.href rather than window.location.href (the fragment identifier of the iframe src).

This doesn't make a difference for normal single-page applications where window===top, so I guess that's the reason why noone has reported this before. The offending line hasn't been changed since Jack's initial implementation in r2151.

This patch fixes it:



Ext.History = (function () {
var iframe, hiddenField;
var ready = false;
var currentToken;

function getHash() {
var href = location.href, i = href.indexOf("#"); // was: top.location.href
return i >= 0 ? href.substr(i + 1) : null;
}
Best regards,
Papandreou

evant
21 Jul 2010, 2:31 AM
Thanks for the report, this has been fixed up in SVN.

Munter
23 Aug 2010, 6:43 AM
Would it be possible to get this bugfix backported to Ext 3.2.x?

evant
23 Aug 2010, 6:50 AM
What do you mean by backported? We won't be changing any of the existing 3.2.x releases just to incorporate this fix. We used a fix similar to what the OP posted, it just grabs location.href instead of top.location.href.

Munter
23 Aug 2010, 7:07 AM
This doesn't seem to be the case where I am sitting:


$ svn info
Path: .
URL: http://code.extjs.com/svn/ext/branches/ext-3.2.x
Repository Root: http://code.extjs.com/svn/ext
Repository UUID: c0a82769-a6a8-4f8a-96ba-7530dc2e272d
Revision: 7128
Node Kind: directory
Schedule: normal
Last Changed Author: makana
Last Changed Rev: 7006
Last Changed Date: 2010-07-29 21:49:37 +0200 (Thu, 29 Jul 2010)



$ head -n 18 src/util/History.js
/**
* @class Ext.History
* @extends Ext.util.Observable
* History management component that allows you to register arbitrary tokens that signify application
* history state on navigation actions. You can then handle the history {@link #change} event in order
* to reset your application UI to the appropriate state when the user navigates forward or backward through
* the browser history stack.
* @singleton
*/
Ext.History = (function () {
var iframe, hiddenField;
var ready = false;
var currentToken;

function getHash() {
var href = top.location.href, i = href.indexOf("#");
return i >= 0 ? href.substr(i + 1) : null;
}

Munter
23 Aug 2010, 7:10 AM
Oh, I read that wrong.

So the policy on bugfixes is that once a new version is in beta, no bugfix that affects previous versions will be implemented in them?

wang888
24 Aug 2010, 9:27 PM
I read that wrong.

llexa313
8 Nov 2010, 4:10 AM
var href = location.href, i = href.indexOf("#");
After this fix, Ext.History's "change" event does't work in iframe.

For example:

<html>
<head>
</head>
<body>
<iframe src="http://dev.sencha.com/deploy/dev/examples/history/history.html" />
</body>
</html>

Just put a breakpoint in history.js at 76 line, in "change" event handler function, and this function don't called when tabs clicked.
But in this (http://dev.sencha.com/deploy/dev/examples/history/history.html) example handler function called.

Also, in previous version (with "top."), "change" event in iframe works fine.

papandreou
8 Nov 2010, 7:10 AM
After this fix, Ext.History's "change" event does't work in iframe.

Everything works exactly as expected in my app. Your example seems to break because of the same-origin rule. I get this error in Chrome's error console:


Unsafe JavaScript attempt to access frame with URL http://localhost:3000/history.html from frame with URL http://dev.sencha.com/deploy/dev/examples/history/history.html. Domains, protocols and ports must match.

Try a test setup where the main doc and the iframed doc are served from the same host name and port.

... But what were you really trying to accomplish?

Best regards,
Papandreou

llexa313
9 Nov 2010, 1:05 AM
I get this error in Chrome's error console:
Try a test setup where the main doc and the iframed doc are served from the same host name and port.


If you test my previous example in Chrome and put breakpoint at 67 line of history.js ("tabchange" event handler) code will stop when you click any tab, but never stops at 76 line ("change" event handler). Despite an error in console.

Ok, I've tested it on my local IIS webserver, I've got the same result.
Just put this html file in extjs 3.3 virtual folder:

<html><head></head>
<body>
<iframe src="examples/history/history.html" />
</body>
</html>



... But what were you really trying to accomplish?


My application works fine in Ext JS 3.2, but after this fix, i've got some problems.
And I'm trying to get Ext.History in 3.3 version work correctly.

papandreou
9 Nov 2010, 4:08 AM
My application works fine in Ext JS 3.2, but after this fix, i've got some problems.
And I'm trying to get Ext.History in 3.3 version work correctly.

Does your application use an iframe, or are you trying to make it iframe-able?

Best regards,
Papandreou

llexa313
9 Nov 2010, 4:10 AM
Does your application use an iframe, or are you trying to make it iframe-able?
Yes, my application use an iframe.

UPD and works correctly with Ext.History from 3.2 version

papandreou
9 Nov 2010, 5:21 AM
Yes, my application use an iframe.

What is the iframe used for? Are you running Ext.util.History in the iframe and expecting it to monitor the fragment identifier of the parent window?

In that case, I'd argue that your expectations are wrong -- if you run Ext.util.History in an iframe, it should monitor the fragment identifier of the iframe src. That's what the bugfix was about.

If not, please provide more details about your application and its use of the fragment identifier and Ext.util.History.

Best regards,
Papandreou

llexa313
9 Nov 2010, 6:08 AM
What is the iframe used for?

In my application iframe used for showing some information for users, also I use tabs, like in example.


Are you running Ext.util.History in the iframe and expecting it to monitor the fragment identifier of the parent window?

No, I don't care where fragment identifier showing, but I won't "change" event work correctly when I execute Ext.History.add.


In that case, I'd argue that your expectations are wrong -- if you run Ext.util.History in an iframe, it should monitor the fragment identifier of the iframe src. That's what the bugfix was about.

Yes, you are right, it should monitor iframe src, and this fix do it, but it breaks work of "change" event, and these is not right.


If not, please provide more details about your application and its use of the fragment identifier and Ext.util.History.
My application works with Ext.History like in history example, but in "change" handler I have some control features for another elements. And, how I sad before, theirs worked fine in 3.2 version.