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//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.

6bf46ca