If I point phantomjs to this page:
<html>
<body>
<script>
$(document).ready(function () {
atesting();
});
</script>
</body>
</html>
with this phantomjs script
var page = require('webpage').create();
page.open('http://testpage.com', function(status) {
console.log("Status: " + status);
if(status === "success") {
page.render('testpage.png');
}
phantom.exit();
});
will it:
call the “atesting()” function or
will it not call it or
will it “maybe sometimes” call the function because it might stay on it long enough so that the function is called?
After some tests, it seems that the page is rendered before the document is ready. So the atesting() function will not be called.
If you want to render the page after the document is ready, see this answer : How can I wait for the page to be ready in PhantomJS?
Related
From the documentation I understood that in order to change the language of the recaptcha I have to render it explicitly.
The problem is, however, that it's not really showing up, and the onload is not even called.
When I try to render it automatically it does work.
Here's the code:
In the HTML head: (I have also tried putting this at the end of the body tag)
<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit&hl=iw" async defer></script>
In the HTML form:
<div id="recaptcha"></div>
Javascript:
var recaptchaCallback = function() {
console.log('recaptcha is ready'); // not showing
grecaptcha.render("recaptcha", {
sitekey: 'My Site Key',
callback: function() {
console.log('recaptcha callback');
}
});
}
I just copied your code, used my own Site Key and it works.
The code I used is:
<html>
<body>
<p>ReCaptcha Test</p>
<div id="recaptcha"></div>
<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit&hl=iw" async defer></script>
<script type="text/javascript">
var recaptchaCallback = function () {
console.log('recaptcha is ready'); // showing
grecaptcha.render("recaptcha", {
sitekey: 'SITE_KEY',
callback: function () {
console.log('recaptcha callback');
}
});
}
</script>
</body>
</html>
Check your code carefully, as just a single character typo can stop things from working.
Make sure that your onload method is defined before the recaptcha script. Otherwise you will have a race condition where the recaptcha script could be attempting to call your method before it is defined (especially if the recaptcha script is cached).
From the documentation for onload https://developers.google.com/recaptcha/docs/display
Note: your onload callback function must be defined before the
reCAPTCHA API loads. To ensure there are no race conditions:
order your scripts with the callback first, and then reCAPTCHA
use the async and defer parameters in the script tags
For example:
<div id="recaptcha"></div>
<script type="text/javascript">
var recaptchaCallback = function () {
console.log('recaptcha is ready'); // not showing
grecaptcha.render("recaptcha", {
sitekey: 'SITE_KEY',
callback: function () {
console.log('recaptcha callback');
}
});
}
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit&hl=iw" async defer></script>
My problem was that I did not realise that the second callback is only fired upon submission of the form - whereas the first callback is executed on page load.
HTML
<div id="captcha"></div>
<script src='https://www.google.com/recaptcha/api.js?onload=recaptchaReadycallback&render=explicit' async defer'></script>
JavaScript
// Render captcha and set call back function on api.js load finish
function recaptchaReadycallback(){
grecaptcha.render('captcha', {
'callback' : recaptchaCheckedCallback,
'expired-callback': recaptchaExpiredCallback,
'sitekey': 'YOUR-SITE-KEY'
});
}
// On expiry do stuff. E.g. show error
function recaptchaExpiredCallback(){
grecaptcha.reset();
// Show 'check the bloody box' error
};
// On not a robot confirmation do stuff. E.g. hide error
function recaptchaCheckedCallback(){
// Hide 'check the bloody box' error
}
I have tried the following:
<body id="myBody" onload = "setTimeout('a()', 5000)" / >
Is this the correct method? The reason why I want to do this is because I have my entire website animating in (such as fade ins) on page load. Having my javascript only makes the animation unsmooth.
Any feedback appreciated.
This code will work. Just set your time in milliseconds and write your JS code on loadAfterTime function:
<script>
window.onload = function(){
setTimeout(loadAfterTime, 5000)
};
function loadAfterTime() {
// code you need to execute goes here.
}
</script>
window.addEventListener("load", function () {
animation();
setTimeout(otherOperation, 5000);
}, false);
function animation() {}
function otherOperation() {}
maybe you can use code like this
<body id="myBody" onload = "setTimeout(a, 5000)">
Try this
if you are using jQuery your animation has a callback that you can use to delay the firing of all other javascript events like so:
$( window ).on( 'load', function () {
$( '.someElements' ).animate({
// properties to animate
}, 300, function () {
initScripts();
});
});
function initScripts () {
// call all other functions here
}
The Browser is always load all of your script if any when you open the web page. So It depend on when you call your javascript functions.
Try this:
document.ready(function(){
// your code
});
or
$(function(){
// your code
});
both of them make sure that all of element on your page have been loaded.
I am refreshing an iframe on my page when someone clicks on an image with this code:
$("img").click(function() {
$('#space iframe').attr('src', function(i, val){ return val; });
openBox();
});
But I only want to execute openBox() function after the iframe is done refreshing.
How can I achieve something like that?
Using jQuery:
$('#frameId').on('load', function() {
//code to execute after frame loaded
});
Using vanilla JavaScript:
document.getElementById('frameId').addEventListener('load', function() {
//code to execute after frame loaded
});
While this isn't exactly your problem, here is how you listen for an load event on an iFrame.
HTML
<iframe id="frame"></iframe>
<button id="loadFrame">load frame</button>
JS
$("#loadFrame").click(function () {
$("#frame").attr("src", "http://www.google.com");
$("#frame").on("load", function () {
alert("ad");
});
});
Fiddle: http://jsfiddle.net/7RL35/4/
i have a iframe and i am redirecting pages in iframe.
how to get the event for each page loading finish.
main.html
<html>
<body>
<iframe src="http://www.child.html" id="childframe" style="height:100px"></iframe>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(window).load(function(){
var Body = $("#childframe").contents().find("body");
var Element = Body.find("tag");
// page is redirecting to new page
$(Element[0].click());
window.setTimeout(reallyNext, 1000);
function reallyNext() {
//how to know inner page is loaded
var result= Body.find("#tag1");
//how to get element from anotherpage.html
$(result).bind('DOMSubtreeModified', function(event) {
//how to reach here
});
}
});
</script>
</body>
</html>
child.html
<html>
<head></head>
<body>
<p><br></p>
</body>
</html>
please tell me how to know the inner page of iframe has done loading?
You can use the onload paremeter inside the body tag, which runs after the page is loaded.
For example:
<body onload="myJavascriptFunction();" >
$('#childframe').ready(function() {
...
});
or
$('#childframe').load(function() {
...
});
<script language="javascript">
iframe = document.getElementById("frameid");
WaitForIFrame();
function WaitForIFrame() {
if (iframe.readyState != "complete") {
setTimeout("WaitForIFrame();", 200);
} else {
done();
}
}
function done() {
//some code after iframe has been loaded
}
</script>
This should work
You can hook on the onLoad javascript event of the <iframe /> element (like <iframe onLoad="myHandler" />, where myHandler is your js function), or, if using jQuery, with the following snippet:
$('#childframe').load(function() {
// your code handling the iframe loaded.
});
Note, that your code needs to be part of the page that holds the iframe not the page within it.
I've searched, but I could not find the solution to this problem. For some reason function doesn't get called when page loads the first time, only after refreshing the page it gets called. Examples:
function init() {
alert("hello");
}
Either calling the function with following method:
$(window).load(function () {
init();
});
Or inside a body tag:
<body onLoad="init()">
Also, this problem doesn't occur when I open page directly, only when I'm being linked to the page from another page.
Solved, mobile options must be set before loading jquery.mobile.
<script language=javascript>
$(document).bind("mobileinit", function () {
$.mobile.ajaxLinksEnabled = false;
$.mobile.ajaxEnabled = false;
});
</script>
<script src="scripts/jquery.mobile-1.2.0.js"></script>
Try something in the lines of:
function init() {
alert('Hello!');
}
window.onload(function() {
init();
}