Develop Reference

jQuery .on('load') doesn't work with an object/iframe while .addEventListener('load') does

I'm trying to modify an iframe/object content adding a script into it. At the moment, I have something like this:
// "script" is a node with an self-called function as its content
$(function() {
$('object, iframe').each(function() {
this.addEventListener('load', function() {
this.contentDocument.getElementsByTagName('head')[0].appendChild(script.cloneNode(true));
});
});
});
And it works as expected (the script does its job and it is added to the DOM of the iframe) but the problem comes when I try to do it the "jQuery" way:
// "script" is a node with an self-called function as its content
$(function() {
$('object, iframe').each(function() {
$(this).on('load', function() {
this.contentDocument.getElementsByTagName('head')[0].appendChild(script.cloneNode(true));
});
});
});
In the previous code, the script won't be added to the dom of the iframe.
Is there any reason why the .on('load') version is not working? What can be wrong? Am I missing something?
PS: The iframe is same-origin.

In each case, the inner function's this might not always be what you want it to be. I'd try:
$(function() {
$('object, iframe').each(function () {
$(this).on('load', function (event) {
event.target.contentDocument.getElementsByTagName('head')[0].appendChild(script.cloneNode(true));
});
});
});
Cf. https://api.jquery.com/event.target/

Strange bug with jquery accessing window

I have this code http://jsfiddle.net/xxL6e2fk/
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
janela = window.open("https://www.sitepor500.com.br");
window.setTimeout(
function() {
alert($(janela.window.document).text());
alert($(janela.window.document).html());
},
5000
);
</script>
It just opens a window and tries to get the "text" and "html" of its content. The "text" is displaying the content correctly but the "html" is not. Anyone has any idea how to solve this problem?

there is no html on janela.window.document try using janela.window.document.documentElement instead or targeting the body tag within the new window.
$("body", janela.window.document.documentElement).html()

You can use something like this:
var janela = window.open('https://www.sitepor500.com.br');
janela.onload = function () {
setTimeout(function () {
console.log(janela.document.documentElement.outerHTML)
}, 2000);
}
But this can work only if you are asking it from the same domain (sitepor500.com.br)

Reload Div content on interval with jQuery

I am trying to modify a page so that I can reload the content of a div on an interval. This is what I tried:
$("#thediv").load("/thecontent.php");
setTimeout(doPoll,1000);
}
However, using Fiddler reveals that the requests are never made.

Try with this one:
$(document).ready(function() {
setInterval(function() {
$("#thediv").load("thecontent.php");
}, 3000);
});

var content = ''; // file
var element = ''; // id or class
$(window).load(function(){
window.setTimeout("doPoll()",1000);
});
function doPoll(){
(element).load(content);
}

pass value/variable from fancybox iframe to parent

I'am trying to pass a variable/ value from the fancybox iframe to the parent window without success.
Fancybox is launched from a link with
class="fancybox fancybox.iframe"
My code in the fancybox.iframe is:
$(document).ready(function(){
$('.insert_single').click(function(){
var test = $('.members_body').find('{row.U_USERNAME}');
setTimeout(function(){ parent.$.fancybox.close();},300);return true;
});
});
Where '{row.U_USERNAME}' is the username to find in the iframe.
Then, in the parent there's the following code:
$(document).ready(function(){
$('.fancybox').fancybox(
{
openEffect:'fade',
openSpeed:500,
afterClose: function(){
alert($(".fancybox-iframe").contents().find(test));
$('#form input[name=username]').val()(test);return false;
}
}
);
});
But when the fancybox is closed, there's no alert showing up with the variable "test", nor the variable is showing up as a value or as a text in the input field of the form.
I've read and tried various solutions found here on stackoverflow without success.
Thanks in advance for helping
EDIT
Here's an Example

When the fancybox is closed the iframe is removed from the document. So you must use beforeClose event instead of afterClose
$(document).ready(function() {
$('a.fancybox').fancybox({
openEffect:'fade',
openSpeed:500,
beforeClose: function() {
// working
var $iframe = $('.fancybox-iframe');
alert($('input', $iframe.contents()).val());
},
afterClose: function() {
// not working
var $iframe = $('.fancybox-iframe');
alert($('input', $iframe.contents()).val());
}
});
});
JSFiddle: http://jsfiddle.net/NXY7Y/1/
EDIT:
I edited your jsfiddle (http://jsfiddle.net/NXY7Y/9/). Update is in this link
http://jsfiddle.net/NXY7Y/13/
Main page javscript:
$(document).ready(function() {
$('a.fancybox').fancybox({
openEffect:'fade',
openSpeed:500//,
//beforeClose: function() {
// // working
// var $iframe = $('.fancybox-iframe');
// alert($('input', $iframe.contents()).val());
//},
//afterClose: function() {
// // not working
// var $iframe = $('.fancybox-iframe');
// alert($('input', $iframe.contents()).val());
//}
});
});
function setSelectedUser(userText) {
$('#username').val(userText);
}
No need to use afterClose or beforeClose events. Just access the parent function setSelectedUser from the iframe on link click event like this:
$(document).ready(function() {
$('a.insert_single').click(function() {
parent.setSelectedUser($(this).text());
parent.$.fancybox.close();
});
});

Some clarifications :
You should use .find() to find elements by selector (you are trying to find a variable .find(test), which is not a valid format).
You should use .val() to get the contents of an input field or .val(new_value) to set the contents of an input field
You should use .html() or .text() to get the contents of any element other than input,
example: having this html code
<p class="test">hola</p>
... and this jQuery code
var temp = $(".test").html();
... temp will return hola.
On the other hand, if you have control over the iframed page and it's under the same domain than the parent page, then you may not need to set any jQuery in the child page.
so, having this html in the child (iframed) page for instance
<div class="members_body">
<p>GOOGLE</p>
<p>JSFIDDLE</p>
<p>STACKOVERFLOW</p>
</div>
You could set this jQuery in your parent page to get the contents of any clicked element in your child page :
var _tmpvar; // the var to use through the callbacks
jQuery(document).ready(function ($) {
$(".fancybox").fancybox({
type: "iframe",
afterShow: function () {
var $iframe = $('.fancybox-iframe');
$iframe.contents().find(".members_body p").each(function (i) {
$(this).on("click", function () {
_tmpvar = $('.members_body p:eq(' + i + ')', $iframe.contents()).html();
$.fancybox.close();
}); // on click
}); // each
},
afterClose: function () {
$('#form input[name=username]').val(_tmpvar);
}
});
}); // ready
Notice that we declared the var _tmpvar globally so we can use it within different callbacks.
See JSFIDDLE

How to call window load event on specific page

I want to call windows.load event on specific page. I am doing like this ..
$(window).load(function(){
if(document.URL == "/car-driving.html")
{
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
return false;
}
});
Here I am trying to show overlay based on page load, but its not working. If I remove if condition then overlay is showing in every page. How to make it specific to only my car-driving.html page so that if anyone visit car-driving.html page, then it will show overlay ?

Try
if (window.location.href.match('car-driving.html') != null) {
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
return false;
}
Hope It Helps

document.URL returns the whole url ex: "h t t p : / / stackoverflow.com/questions/17970734/how-to-call-window-load-event-on-specific-page"
You'll have to use a regex match or indexOf
edit or better yet
document.location.pathname ==

Try displaying the value of the href in an alert and you will see what you need to match:
$(document).ready(function(){
alert(window.location.href);
});

Hello i Use this and working well for me
<script>
$(window).load(function() {
setTimeout(function() {
$('#onload').modal('show');
}, 10000);
}
function delayer() {
window.location = 'Your Desired URL';
}
);
</script>
Here .model is my popup div class