I have a website with a menu, when menu item is clicked I display the page for that menu in an iframe(iframe is set to display home page initially by default). sometimes it could take few seconds to display the page for the selected menu item (for example reports) and I would like to display a loading image while the page is loading. how to do this using javascript or jQuery (sample code will be helpful)? thanks in advance.
Add the loading image to the iframe innerHTML ( or to a div and stop using iframe ) , then use ajax to fetch the new page content , on success iframe innerHTML becomes the content fetched by ajax witch overwrites the loading image . easy to setup but i recomend you stop using iframes
Usually you cannot know when the page finished loading in an iframe. The iframe loading is independent. What you can do is to get the content of the page that you have in the iframe through a ajax get request, and in this way do an animation while you wait for the content.
write a function to show the image and call it when you set the iframe src. when the page is loaded call from within the loaded page a function to hide the image (parent.HideImage)
I think the onload event of the iframe is not supported in all browsers
Related
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.
I need to save my .php file as an .html for backup with using PHP whenever page called (I am going to use ob_start() for it). But the page content is not static. I am using AJAX to load the content.
That's why view-source: does not show the dynamic data, only chrome inspector show them. But I need to save the page with all elements after page loads. Is it possible or not?
BTW after page loads, there is no any other ajax call (on click or something). Page loads all content on init.
Thanks in advance.
I am very experienced with jquery, but jquery mobile is very new to me. I am developing an app using cordova and jquery mobile.
So i have a multi page setup in the html, with navigation bars that switch the pages. All works great there, however, i need to load the page content via ajax when the page is changed.
I am managing to do this with a post request to an external web server that generates the content, then caches it inside a local database via the app. I am currently doing this with the "pagebeforeshow" event.
The problem is, when the user clicks the menu item, jquery mobile has already switched the page before the ajax call in "pagebeforeshow" is fired, which means we see a blank page delay while the content is requested.
So my question is: Is there a way to either prevent jquery mobile from switching the page automatically on menu click so that i can catch the event, grab the content and then manually display the page with changePage() or is there an event i can hook into that fires well before the transition takes place?
So the idea is they click the menu item, a full screen loader shows (which works) , load the content and then display the page, not display the page then load the content....
Make sense?
The way I'd go about it would be to not use pagebeforeshow and instead have the page initally covered by a splash screen.
Then when the splash screen is loaded and displayed (image onLoad or similar) start the AJAX call, which once finished, fades out the splash screen and shows the actual content.
I have a front page with an iframe that loads different content. I want a url that will take users to the front page with pageA loaded in the iframe or another url with pageb loaded. How do I do this?
Is there a simple html solution I'm missing or is this a jquery thing?
You can use a query parameter to specify the page you want the iframe to load.
www.example.com/my/link/page.html?iframePage=website_a
Then you can use Javascript to check the parameter, and specify which page the iframe loads.
Here's an example jsbin.
https://output.jsbin.com/hawinadevi/1?iframePage=website_a Loads Bing
Change the value of website_a to make the iframe load Bandcamp instead.
I'm building a firefox extension that has an iframe inside a panel.
I use a xul file as src of the iframe.
When i click on a specific button inside the iframe, i want the iframe to be loaded again with the same src but hide some elements and show another ones. To do this hide/unhide, i have the code on the xul onload, and it works well loading the iframe the first time, or when changing the src.
But when i hide and show the panel with the same src, the onload isn't triggered again.
Should i be doing something before opening the panel the second time?
Hiding and showing the frame doesn't reload it - it really only hides and shows it without touching the content. To reload a frame from outside do:
document.getElementById("my-frame").contentWindow.location.reload();
Or from inside the frame:
window.location.reload();
For reference: location.reload()