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()
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 have iframe and i have custom javascript for content of iframe. when iframe loaded for first time my custom javascript has no effect but when i right click on iframe and click reload this frame it loading my javascript and working fine.
can any one tell me how can my javascript works at first time.
iframe src is not from same domain.
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.
I have a mobile web site with of a fixed header (divs) and below an iframe in which a page from a different domain is being displayed.
As I wanted a specific area of the page to be displayed inside the iframe after loading I used a pre exsiting #anchor located in the external page by defining the iframe's src with the intended domain of the page + # and the name of the anchor.
It works perfectly on all desktop browsers (in that the page is displayed inside the iframe with the correct line, where the anchor is, at the top of the iframe window), but for some reason when loading the page in a mobile browser (dolphin/Nexus S browser) it doesn't work and all I get is the page inside the iframe as if no anchor was ever defined.. Just the first line of the page at the top of the iframe window...
Any idea why it happens and how to fix it?
Thanks,
Ran.
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