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.
Related
I want to reload my site (only once) before loading any of the content. I implemented this option but the user is still able to see the content of the page before going for reload.
Here is my code
window.onload = function() {
if(!window.location.hash) {
window.location = window.location + '#loaded';
window.location.reload();
}
}
How can I implement this functionality without showing any of the content to the site visitor.
You mean you don't want your user to see any of the content on the page before you trigger the reload?
If you mean 'see', like visually see the content, you could always put a div that blocks the entire viewport, and then remove it once the page has been reloaded.
But to me, this seems like an issue that could be resolved by not adding anything to the document body until your conditions have been met. You should design your code in such a way that a refresh is not needed, as that is creating unnecessary requests.
I currently am building a website that fetchs data from MySQL with php and then displays it. On one of the pages I use a form to submit data and then I reload the page to display it. It does it's job fine and works exactly as I want the only problem is when a user presses the browser back button it goes through all previously submitted data instead of just going back to the page it came from. Is there a way to reload a page without the browser storing it or is there a way to make the browser go back to the previous page instead of history.
NOTE: I am aware of Ajax and how to use it to not reload the page at all but I wanted to see if there was a way to do it without redesigning my whole page with a seemingly small problem.
You can use history.replaceState in HTML5.
Another possibility appears to be
window.onpopstate = function(event) {
window.history.go(-1);
};
although I have not tried this myself.
See https://developer.mozilla.org/en-US/docs/Web/API/History_API and https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate
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.
I searched a lot to get rid of this problem on the internet but could not find a specific solution despite the problem being discussed in details previously.
The query is simple. My javascript dynamically adds an Iframe to the web page (which displays a feedback form). The problem is that, "after answering", now when the user clicks the back-button of the browser the iframe instead of the browser window is affected i.e. the questionnaire is displayed again. I want the browser back button to behave normally.
This behavior is really annoying and I am having real trouble fixing this.
I am using firefox.
Looking forward to the replies. Please inform me if I should give more details.
Thanks,
Your form has a submit button, which posts the page to the server. The back button will always send the user back to the form regardless of whether you use a iframe or not. The ideal way is to notify the user of a completed action, in this case thank the user for the feedback (using an alert box) and redirect the user to the home page or provide a button in the page saying "Back to Home".
Firefox and IE indeed act like you mentioned, but Chrome do not, and I'd guess other WebKit browsers would do the same.
In Chrome, clicking the Back button will land you where you want to go (the previous URL of the parent frame). i.e. Chrome to not add iframe URL changes in the back button history.
Sadly, I've found no way to force IE and FF to replicate this, so I used the AJAX post approach suggested above by Arun.
Here's my iframe source, which use jQuery to post the form, and replace the whole page with the result of that POST:
<form method="post" onsubmit="postForm(this);return false">
...
</form>
<script type="text/javascript">
function postForm(form) {
$.post(form.action, $(form).serialize(), postCompleted);
}
function postCompleted(data) {
$('html').html(data);
}
</script>
This works in all browsers; clicking the Back button will send you back to the previous URL a seen by the end user, instead of the initial form loaded dynamically in the iframe.
I encountered the same problem: I use a dynamically created iframe to show a "popup" on my page, whose SRC points to another page that has got a form and a submit button. After submitting that page, a JS callback is used to hide the iframe. As you explained, this causes a new entry to be added to the history (on IE at least).
But I found out that removing the iframe element from the DOM (instead of hiding it) results in the unwanted history entry being removed (tested on IE9)! Which is what the user would expect in that situation.
You can observe this yourself on IE9:
Open the back button menu (right-click the back button): you only have one entry for the current page
Press submit in the iframe => the back button menu shows one extra entry for the iframe
Remove the iframe from the DOM => the back button menu no longer shows that entry
I am making a greasemonkey script and i would like a link to go forward and modify the current html and allow the user to click back to go to the original page.
How might i do this? using jquery + greasemonkey + javascript. Targeting firefox mostly.
-edit- http://jsfiddle.net/ seems to do it. If you write random html in the html section, hit run, change the html and hit run again. You'll be able to click back/forward to see the output change (however the html input box stays the same). I am using firefox to view this. Thats the effect i want.
it appears the magic is done on line 91. Is this submitting a form in a frame (perhaps the results frame?) and that is causing the movement in history?
88 run: function(e) {
89 e.stop();
90 Layout.updateFromMirror();
91 document.id(this.options.formId).submit();
92 this.fireEvent('run');
93 },
I don't know if that is possible at all because it is the browser itself that takes care of the navigation history. A new history item is added only when you visit a new page.
If I am not wrong you would like the user to turn on/off the changes you make to the page without enabling/disabling greasemonkey and reloading the page.
The only solution I see for this is to take care of it yourself. Save any changes you make to the page so that you can restore it and add some UI to the page to make the user turn on or off your changes.
EDIT 1:
It seems that jsfiddle.net loads a new page to do that. Using firebug you can see it is not doing any AJAX request to run the code, it is just loading a new page (maybe the same page, with different parameters, but nevertheless it is loading a page.)
EDIT 2:
Yes, maybe it is loading the page in a frame. As you can see from the HTML:
<iframe name='result' frameBorder='0'></iframe>
But this does not change your situation. If you want your logic to be in your greasemonkey script you can't load a new page. Otherwise you should upload a web page somewhere and make it load in an iframe passing it the HTML you want to modify: this is definitely not what you want to do.
It sounds like you want to use a history manager. You could either track the changes you make and undo them when the user goes back, or possibly call a page refreshing function.