I have an iframe that content is somehow loaded with ajax, not with content Location. This is WordPress customizer preview iframe. It's something like jquery mobile, the page in iframe flashes and new content is loaded. That said, I can't use load and unload events for this iframe, and I have to bind a click event listener to its contents.
So I came up with an idea to emulate load event. I will add javascript to the page that is loaded in an iframe and it executes iframe parent function when document is ready, the function then can bind the event listener to the new iframe contents.
But how can I unbind it, so I don't get any memory leaks? I tried adding an event listener on unload in the loaded page, but strangely, the unload event runs after the next page is already loaded, so the contents which have an event listener are already gone.
So basically there's no way I can off() the iframe contents before they disappear from the DOM. I have to off() them when they are gone, how can I do that?
Edit:
I think I got it solved. Just store the contents in a variable. It seems like memory is not leaking anymore.
var iframeContents;
this.iframeLoadEmulation = function () {
if (typeof iframeContents !=='undefined') {
console.log('unbinding old content');
iframeContents.off();
iframeContents=null;
}
iframeContents=$('#customize-preview').find('iframe').contents();
iframeContents.on('click', function(){ console.log('click'); });
}
Did I get that right? Is it a good code or is there a better way to do it?
Related
I have an issue with my Javascript not working in Firefox.
I'm fetching images for a page from external sources (IP cameras). Where I am unable to fetch an image, I want to serve my own placeholder image so I don't show the browser default broken image. The solution I have works perfectly in Chrome. However, in Firefox it is automatically loading the missing image - but if I refresh the page it then works perfectly.
The code is:
$(function () {
// Replace Broken Image
$('img').error(function(){
$(this).attr('src', 'https://www.evercam.io/img/error.png ');
});
});
Does any one know why this wouldn't work in Firefox?
Cheers,
Ciarán
it about event binding use on/live instead.
https://api.jquery.com/on/
basicly what happens is it only bind event to imgs already there for more check JS event delegate.
try $(document).on("error", "img", func...);
basically document can be anything (selector, or object) that is a parent of actually element that triggers the event. what happen is with the event bubbling parent click event also get triggered and in the event jquery checks the trigger has given selector.
Cheers.
I'm wondering if I have a page, that contains multiple iFrames and if I'm communicating through modification of the iFrame src attribute, would it be possible to set a hashChange listener on the src attribute.
Of course this would have to be inside the iFrame code, but trying this:
$(document).ready(function () {
console.log(window);
$(window).on('hashchange', function() {
console.log("IFRAME HASH CHANGED");
});
});
Does not trigger anything.
Question:
Any idea if this is possible? If not, how else could it be done?
Thanks for inputs!
The code above is fine. You should have no issues setting a hashchange event listener on the iframe's window. The problem is that you are viewing the console for the parent window. For example, if you change your console.log to an alert, you will see that it is in fact working.
If you're using google chrome's developer tools, you can click on this drop-down to switch between which window context you are in:
I need to do something when leaving page (page '#first').
It's really simple:
$(document).on('pagebeforehide', '#first', function(event, ui) {alert('leaving page');});
No problem when I leave page by "inner" links something like this one:
Open something
here event fired and handler executed.
But when I want to open external link like this one:
Open something
here event not fired and handler not executed.
Doesn't matter is page content simple or complex - I found that this depends only on fact whether link inner or external.
What's wrong?
rel="external" means that page will be opened as an external page and all previous page content (including its scripts) will be lost, that will also trigger a full page refresh so your pagebeforehide event is not going to trigger because it will no longer exist.
jQuery Mobile page events can occur only during normal page changes. Basically what I want to say is you need to go to the other jQuery Mobile page for this event to trigger. In your case you are forcing app to do a full page refresh, at this point, page refresh will occur before pagebeforehide event.
EDIT :
While there isn't any crossbrowser solution for this you can always cheat.
Instead of having href link inside your button, replace your link http://www.google.com with # and add it an id so we can identify it, like this:
Open something
Now add a click event to this button and do what ever needs to be done before changing page to www.google.com:
$(document).on('click', '#change-page', function(){
// Do something here then change page
});
Or link your button to another dummy inner page (use this inner page only for this purpose), catch pagebeforehide on it:
$(document).on('pagebeforehide ', function(){
// Again do something here and manualy change the page
});
I need some advice. I have a web page and want to extend it's functionality with greasemonkey script and firefox.
When page has loaded I need run custom function during user's page scrolling (with mouse whell or scrollbar). I want show some div block when user scrolling down and hide it when he scrolling to the top.
But I met some problem - I couldn't assign event handler to the onscroll event. I use next part of the code:
function showFixedBlock(){ ... }
function onScrollStart(){ ... showFixedBlock(); ... }
window.onscroll = onScrollStart;
I test this piece of code on my test html page and it works, but when I copy it into greasemonkey, script doesn't work.
Should I assign onscroll event handler during page loading? As I know greasemonkey execute it's scripts when page has loaded? Is it the reason of the problem?
Is there some additional requirments to handle 'onscroll' event? How can I do that?
Thanks.
I may be wrong, but I think that this should work:
unsafeWindow.onscroll = onScrollStart;
or
window.addEventListener("scroll", onScrollStart, false);
You should really use the latter example.
Just a simple question, for the jQuery event. Are the .load(), .ready() and .unload() run in order when the DOM is loaded? The answer seems yes when I see the jQuery Documentation.
<script type="text/javascript">
$(window).load(function () {
// run code
initializeCode();
});
$(document).ready(function() {
//run code that MUST be after initialize
});
$(window).unload(function() {
Cleanup();
});
</script>
However, the code inside the .ready() is execute before the initializeCode(); is execute, so I feel really strange. And now I have to place my code inside the .onload() method and just after the initializeCode(); line, which means to be inside the .ready() block.
Could someone explain me more about this, as I am new to jQuery?
NOTE: .load() & .unload() have been deprecated
$(window).load();
Will execute after the page along with all its contents are done loading. This means that all images, CSS (and content defined by CSS like custom fonts and images), scripts, etc. are all loaded. This happens event fires when your browser's "Stop" -icon becomes gray, so to speak. This is very useful to detect when the document along with all its contents are loaded.
$(document).ready();
This on the other hand will fire as soon as the web browser is capable of running your JavaScript, which happens after the parser is done with the DOM. This is useful if you want to execute JavaScript as soon as possible.
$(window).unload();
This event will be fired when you are navigating off the page. That could be Refresh/F5, pressing the previous page button, navigating to another website or closing the entire tab/window.
To sum up, ready() will be fired before load(), and unload() will be the last to be fired.
window load will wait for all resources to be loaded.
document ready waits for the document to be initialized.
unload well, waits till the document is being unloaded.
the order is: document ready, window load, ... ... ... ... window unload.
always use document ready unless you need to wait for your images to load.
shorthand for document ready:
$(function(){
// yay!
});
If both "document.ready" variants are used they will both fire, in the order of appearance
$(function(){
alert('shorthand document.ready');
});
//try changing places
$(document).ready(function(){
alert('document.ready');
});
Also, I noticed one more difference between .load and .ready. I am opening a child window and I am performing some work when child window opens. .load is called only first time when I open the window and if I don't close the window then .load will not be called again. however, .ready is called every time irrespective of close the child window or not.