location.reload(true) in SagePay iframe reloads parent in IE10/11 - javascript

This issue may be a generic javascript / iframe issue but relates to SagePay's authorisation (low profile) page which uses
setTimeout(function () { location.reload(true); }, 2000);
to reload the page. When using IE10/11 the parent is reloaded or navigates to the iframe url.
This doesn't seem to happen in a asp.net web forms publicly hosted site using identical html, however, is happening in an internal MVC4 application.

I don't know, if this is still an issue. But I ran into an similar condition where calling location.reload(true)in an iframe refreshed the parent and loaded the content of the iframe into the browser.
I made some researches but couldn't find anything which would trigger this problem. I also created a test page with an iframe which reloads itself but there the refresh worked properly in IE 11. But for the case where IE has the problem described above I now use location.href = location.href.replace(location.hash, '') instead of location.reload(true) as a solution.
One limitation of this approach is that it doesn't force the browser to clear the cache of the page. I also did not test this in IE 10 yet but feel free to add a comment if it works there. I hope this helps.

Related

Keep GreaseMonkey Script Working After Page Navigation

If a Greasemonkey script has functions running, and then navigates to a new page using window.location.assign(), is there a way to keep those functions running, and without the entire script reloading? I'm wondering this since Greasemonkey is a browser plugin, maybe it can keep working no matter what page you navigate to.
I don't think I can use Ajax, or an iframe since it needs to navigate to different domains.
Thank you for any help you can give!
I doubt it is possible. Greasemonkey is a browser plugin, but the script you created for a specific page works only inside this page, not globally. Once you navigate away, the script, part of the page you navigate away from, is killed, like the rest of the page.

jQuery Mobile navigation not working

I'm currently working on a web project with jQuery mobile but navigation just won't work.
When i hit a page from the menu (eg. "customers") the url displays correctly (www.aaa.bb/#customers) and the page is loaded without any problems. When i hit another page the url is also correct and the page loads but when i then try to go back using the browser's back button the page doesn't change even though the url changes correctly..
I have seperate files for my different pages. Could this cause the problem?
If so, why does the url change correctly then?
Thank you!
Edit: Ajax is enabled on my page
If you are using AJAX to navigate throughout your site it is necessary to update the history yourself using history.pushState, since your HTTP (ajax) call will otherwise not be logged and stored in the history.
There are various ways you can manipulate the history, or change how you AJAX calls get fired, here is a solid doc on how to manipulate browser history, follow this up by creating a function that checks onpopstate event that is fired and update your page.
After hours of reading docs and testing different attempts I wrote this solution:
$(window).on("navigate", function(){
var file="/";
if(typeof history.state.pageUrl != 'undefined') {
file += history.state.pageUrl + ".php";
}
else{
file += "index.php";
}
$(":mobile-pagecontainer").pagecontainer( "change", root + file, {"reverse": true} );
});
This solution only works for my specific problem and may not work for others.
Known limitations:
all your jQuery Mobile pages have to be in the root directory of you website
the filenames of your pages have to be equal to their data-url attribute
all your pages have to have the same file extension (.php)
Dialogs will probably cause trouble too. I am also facing a strange issue when navigating to my index.php file.
I will improve my solution over time and post it again.

Prevent browser from keeping iframe url when reloading the parent

I have a form inside an iframe. As soon as the user saved the data I redirect the iframe to a page that does nothing more than reloading the main page (as some other content depends on what was inserted inside the iframe). So the data outside the iframe ist updated and the form should appear again.
The problem: at least firefox (haven't tested it in other browsers yet) keeps the "new" url of the iframe with the redirected page and not the one that is set by sourcecode. Something similar to autocompletion with input fields.
I do the reload by
parent.location.reload();
Is there maybe a way to force a real reload without keeping any information from the history of the containing iframes?
btw: I may use jQuery if it helps.
Thanks.
You could try something along these lines (http://jsfiddle.net/AKykZ/):
document.querySelector('button').addEventListener('click', function() {
document.querySelector('iframe').setAttribute('src', document.querySelector('iframe').getAttribute('src'));
window.top.location.reload();
return false;
}, false);
In the fiddle, click the link in the iframe, and hit the reload button. It sounds like you're reloading from the iframe, but this should at least get you on the right track.
Found the solution. It is pretty funny but doing the reload by
parent.location.href = parent.location.href;
makes a fresh reload of the page without keeping the history. Haven't tested it in other browsers though.

How can I detect when an iframe page begins loading?

I'd like for the opener of an iframe to be able to detect each time the user changes pages within that iframe. Using jQuery, I can detect each time a page finishes loading within an iframe via the following:
$('#myIframe').on('load', function() {/*do stuff*/});
However, I'd also like to detect (in the iframe opener) each time a page starts loading within that iframe.
Note: The content that is displayed in the iframe is from a third-party site, so I don't have the ability to insert code there so that the iframe can explicitly alert the opener.
Does anyone know of an event that is fired when a page begins loading? I'm not having much luck finding anything via Internet searches, as most people seem to only be interested in detecting when the iframe has finished loading.
It seems unfortunately that the only way to be sure it will work in most browsers is to use the <iframe onload="myonloadscript();"
The window.onload event of the main page will tell you when the iframe has loaded and you can be sure it has begun it's request for it's src page
Edit:
Just copying it from an article (Their are hacks for this)
doing this cross-domain? Not so easy. You’ll get something along the line of: Child document does not have the right to access parent document. In fact there is a lot of documentation on the web about how to achieve it, but the problem is that it is often outdated, with solutions that often only works in a couples of browsers.

Maintain redirection inside iFrame

I am building an application where I want to load a page from another server into my page. The particular page that I'm pulling data from depends on a query that is being run (with OAuth access) on that foreign server. Once I get the URL for that page, I am loading it in an iFrame and displaying it on my page.
The problem is, the URL that the query gives me is actually to a page that forwards three times before getting to where I actually want to go. To make things more complicated, it also has frame-buster code on the initial page. I set my page to redirect to a page that returns a 204 status on page unload so as to beat the frame-buster, but now it's just stuck displaying the initial blank page instead of the content I want, which is at the end of three redirects.
My initial idea was to try to capture the code for the outgoing location request on page unload. I had hoped to be able to see where the user is being redirected to and load that request inside the iFrame instead. Repeat three times to get the correct page in the iFrame. Intuitively, however, this felt like it shouldn't be able to work, and of course it does not because letting pages see where their users are going to upon leaving a site would be a major privacy issue.
Next, I was thinking that maybe I could just parse each new page in turn as it was loaded into the iFrame to find the script for the redirect. I'm pretty sure it's done on the server side, however, since looking at the code I was getting didn't turn anything up.
I started looking for ways to maintain that redirection inside the iFrame. That is, allow the redirect to occur, but force it to stay inside the iFrame while also preventing the frame-buster code from doing anything. This would be the easiest solution, but I can't find a good way to do it. Right now, I just have a blank page loading inside an iFrame, and I think there's something on the server side that performs the redirect that isn't running in the iFrame. The frame buster code only prevents the entire document from changing, not the iFrame. Is there a good way to do this or am I going about things the wrong way?
To prevent the frame buster, from here:
<script type="text/javascript">
var prevent_bust = 0
window.onbeforeunload = function() { prevent_bust++ }
setInterval(function() {
if (prevent_bust > 0) {
prevent_bust -= 2
window.top.location = 'http://server-which-responds-with-204.com'
}
}, 1)
</script>
load the first page via curl locally, strip the busting code, make all links absolute and display that in the iframe.
it should redirect as espected and do your merry thing.
Good luck making all the urls in the document absolute. Dont forget javascript urls and functions you might need to override by pasting in your owncode after the script tags.

Categories

Resources