Reload page when back from iframe - javascript

I have an HTML page on which iframe is embedded which is hidden initially.
When clicking on the button, iframe gets opened. If clicked two times and then click browser back button it getting redirected to cached first iframe and not on the button page.
I am doing the following code to reload the page hence it go to the button page inside the document ready.
window.history.pushState('', null, './');
$(window).on('popstate', function() {
location.reload();
});
Sometimes it doesn't work. Not sure where I am doing wrong.
Any recommendations, please.
Is there any way to prefetch iframe with different sessions?
Updating iframe src vs ajax call and then append data to iframe HTML, which is fast?

Related

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.

Reload page dynamically

I create a dashboard to which I added a modal box which proposes to save or to go back. To go back, I need to reload the page (so that the data will return to the initial state). I used javascript and this script works but the problem is that the browser shows that the page is reloaded (I would like to reload the page dynamically). Do you have an idea to reload the page dynamically?
current code:
function cancel() {
close();
document.location.reload();
}
To my knowledge there is no way to do this automatically. You will have to fetch all your values asynchronous and repopulate your Html.
Or perhaps put your entire dashboard inside an iframe and call document.location.reload(); inside that.
That should stop the browser showing the reload animation. I have not tried it though.

how to force-refresh the previous page's url when the back button on the browser is pressed after changing it with window.history.pushState()

I am trying to build a web app where the user can navigate from one page to another without reloading the pages but at the same time updating the url as the content changes. I use jQuery .load() function to change the page content and window.history.pushState() to change the URL.
$(".change-url").on('click', function (e)
{
window.history.pushState('page', 'title', 'about.php');
$("#page-content").load('about.php');
})
When I click the "change-url" button on the home.php page to go to the about.php page, it works fine and the url changes to about.php but when I click the back button on the browser from the about.php page, the #page-content div still shows about.php page content although the url changes correctly back to home.php.
Please how can I force the browser to reload the new url (home.php) when the back button is pressed? or is there a better way of achieving this? Thanks.

Get event outside the iframe or reload the main website from iframe

I am opening an url in iframe. That page has form to fill by user. When user fill the form, I want to reload the main website (outside the iframe) to be reload. Or if I can trigger a outside javascript function with in iframe.
I am working with ReactJs.
Ex. I have 2 Websites A and B. I am opening a specific url of site B in A using iframe. When user submit the form in ifram. I want to reload the web page of site A using javascript. When I try window.location.reload(), window.parent.location.reload(). they all reload iframe.
Have you tried using
window.location.assign(url);
and just adding the url of the original page? window.location.reload() is just refreshing the page, so if you open a new page refreshing it is still going to keep you on that page.

How can you temporary remove an iframe from a page, and later add the iframe back without re-downloading the iframe content?

I have a page with some IFrames. These IFrames are on the same domain. I wanted to remove the iframe contents from the page when I opened a modal window, to reduce lag in the modal window.
And then, when I close the modal window, I'm hoping to reattach the IFrames to the page.
The problem is, every method I try re-downloads the IFrames when I reattach them. I'm unsure if it's even possible to do this.
As an example, jQuery has a detach method that is supposed to not require you to download the content again, but this does not work.
var detatchWidgets = $container.find("iframe");
detatchWidgets.detach();
msgDialog.on('hidden.bs.modal', function(){
$container.append(detatchWidgets);
});
first of all, sorry if i missunderstand you.
just for testing i created 2 JSFIDDLE's:
1) i used as the src of the iframe, it alerts 2 sec after iframe loaded
https://jsfiddle.net/hr97240j/10/
setTimeout(function(){
alert("loaded and iframe says hello");
},2000);
2) here is a page where the iframe is embbed.
https://jsfiddle.net/hr97240j/12/
in the 2nd i show the iframe, then hide it, after 3 sec i show it again, i can say, the src of the iframe is not reloaded again!
i see the contents of the iframe without any new alerts as in the first load.

Categories

Resources