Firefox: Can't leave step after loading external web page in a step

[breity]

To reproduce, create a project with a step that has a link to another page outside of WISE (and the link target is the current page) plus another step or two. View the project, open the step, and click on the link. Then try to visit any other step in the project. Firefox will prevent navigation and you'll see these errors:

Error: Permission denied to access property 'nodeId' http://wise.berkeley.edu/vlewrapper/vle/view/vle/vleview_core.js Line 963

Error: Permission denied to access property 'document' http://wise.berkeley.edu/vlewrapper/vle/view/vle/vleview_core.js Line 879

In Chrome, you will be able to navigate to another step, but will see this security warning at the same locations in vleview_core.js:

Uncaught SecurityError: Blocked a frame with origin "http://outside.url" from accessing a frame with origin "http://outside.url". Protocols, domains, and ports must match.

The problem is that the document element for the step content iframe has been set to an external site, so WISE does not have access to the iframe document anymore.

We don't have this problem with outside URL steps because we generate another iframe to load the external page. We should think about the best way to deal with this. Maybe add "target='_blank'" to all links in step content? Something else?

[hirokiterashima]

Another option would be to create a new iFrame, set its height&width to take up the entire contentPanel window, and set its url to the url of the link when the user clicks on the link.

The advantage of this would be that the students will not leave WISE and the webpage will render within the contentPanel. This is what authors would expect when they create a link without target=_blank.

The issue with this approach would be "how to get back to the original page"? Maybe provide a "close" button to close the iFrame, revealing the original page? Or when the user clicks on the browser's "back" button, the iFrame would close, revealing the original page?

[breity]

Yeah, this might be a better option. Mimic what we do for outside URL steps. So if authors create a link with "target=_blank", we leave it alone. But otherwise we change the link so that it generates the iframe and sets the source to the href. We'd also want to only do this for links that are full URIs and not fragment identifiers.

Using the back button to remove the iframe is an option. That would mimic the behavior of navigating through links in an iframe or normally on the web. Not sure about the best way to do that technically, though, as the "back" browser event is usually caught by the iframe. We should investigate.

I wonder if we should also eventually think about mimicking a similar default back button behavior in WISE. So hitting the back and forward buttons would navigate back and forth between the user's history of step visits. It gets a little complicated when you throw in things like the starmap though, where navigating to the menu mimics a change in browser state/location. We could include navigating to the menu in the browser history for nav modes where it makes sense to do so.

On Wed, Oct 9, 2013 at 5:20 PM, Hiroki Terashima notifications@github.comwrote:

Another option would be to create a new iFrame, set its height&width to take up the entire contentPanel window, and set its url to the url of the link when the user clicks on the link.

The advantage of this would be that the students will not leave WISE and the webpage will render within the contentPanel. This is what authors would expect when they create a link without target=_blank.

The issue with this approach would be "how to get back to the original page"? Maybe provide a "close" button to close the iFrame, revealing the original page? Or when the user clicks on the browser's "back" button, the iFrame would close, revealing the original page?

— Reply to this email directly or view it on GitHubhttps://github.com/WISE-Community/WISE-VLE/issues/299#issuecomment-26020221 .

Jonathan Lim-Breitbart Feature Developer and Lead Designer Web-based Integrated Science Environment (WISE) http://wise.berkeley.edu

[geoffreykwan]

I've implemented a fix for the issue by wrapping the code in the onExit() functions in a try/catch. This allows the student to navigate to other steps after loading an external webpage. Turns out the history.back() call wasn't even needed.

https://github.com/WISE-Community/WISE-VLE/commit/6bf46ca73dc2ce5358ffb88f2b66f73ccb504e86