window.history.back not working on new window with Firefox - javascript

I have a page with a link that opens a new window with a div and an iframe. The user can navigate through the web that it's inside the iframe and the div shows information.
The user wants an option to go back on pages that he visited inside the iframe, so I put an image on the div to allow that option. The image has the onClick event that calls history.back() method.
The problem that I have it's that in Firefox when I try to go a page back, the iframe stills showing the page that I'm seeing but if I try in Chrome it works great, I can visit all the sections that has my page and I can go back clicking on that image.
I tried to use the browser's context menu but in Firefox does nothing.

Related

Window.open and window.print blocking JavaScript

I have a site where a particular page has two buttons that open pages in new tabs. One page is a preview of an item, and one is the print of that item.
// Preview button's click event
window.open('my.preview.url.com', 'preview');
// Print button's click event
window.open('my.print.url.com, 'print');
On the print page, window.print(); is call on page load.
This seems to create a bit of an issue on some browsers. Opening the print page and not closing the print preview results in all of the JavaScript being blocked on the originating page (with the buttons) and the preview page (if one had been opened previously).
This appears to not happen in all browsers. For example, Chrome displays the issue but Firefox does not.
This is similar to a similar unanswered post, which has a useful fiddle at http://jsfiddle.net/Zicane/7ntsb7hh/10/
Hoping someone might know the solution to both issues.

Wordpress, how to debug Javascript to check a specific behavior

I need to debug Javascript to check which function is called on a specific behavior.
To be more specific, when we click inside an iframe, all the page or at least the iframe is reloaded, so loaded 2 times.
For example, if you take a look at this page:
https://artetcadres.fr/art-et-images/#collection/hopper/
and click on the artist "Klimt", the main page activate a javascript function, display this image on the entire page and reload the iframe content.
I tried with the Chrome Devtools but can't figure out which function is called display the image "Loading..." and reload the iframe.
It's reloaded maybe because the url is dynamically updated. The anchor #collection/hopper/ will become #collection/klimt/.
This strange behavior appeared after an wordpress upgrade.

iFrame target ignored after random number of clicks?

On this page: http://corpapps.parker.com/corpapps/interactive_product_selector/Front_Loader_Selector_05.html
I have a section of visibility toggled divs, each one with an image map.
The tab links and the hotspots all point to an iFrame (iframe_PSD) to open a remote page.
The problem is, when a user clicks the tabs and hotspots, which do open the remote page in the iFrame, at some random point, the links begin opening in a new browser tab, ignoring the target="iframe_PSD"! From that point, every click will open the remote page in the new browser tab.
Tested in the latest Chrome, Firefox and IE.
Has anyone ever heard of this issue? Any insight would be appreciated, thanks!

Displaying a popup without being minimized

I have several links in a page that opens a popup window to display the contents of these links.
On Chrome when I click on a link (see code below) the popup window appears front and when I click on a second link, the content changes and the popup its still front: This is the behavior I want to have.
But with Firefox and IE, when I click on the first link the popup appears and when I click on the second link, the content changes but the popup window is minimized.
How to have the same behavior as Chrome on Firefox and IE?
Here's the code:
function openpopup(popurl,winName){
winpops=window.open(popurl,winName,'toolbar=no,location=no,status=no,menubar=yes,scrollbars=yes,resizable=yes,width=1020px,height=300px,left=125px,top=300px,scrollbars=yes').focus();
}
centent1
centent2
I edit the message to not create a second topic.
With IE the text displayed in the popup window does not contain newlines, it is unreadable. Is there something to add more for proper formatting?
Simply add .focus()
function openpopup(popurl,winName){
winpops=window.open(popurl,winName,'toolbar=no,location=no,status=no,menubar=yes,scrollbars=yes,resizable=yes,width=1020px,height=300px,left=125px,top=300px,scrollbars=yes',true)
winpops.focus();
}

IFrame Back button

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

Categories

Resources