how to know the webpage is loaded - javascript

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.

Related

jQuery's load() not working

I have a simple script that's supposed to load comments every second but for some reason it doesn't work. Here's code
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js">
var auto_refresh = setInterval(
(function () {
$("#comments").load('url to comments.php');
}), 1000);
</script>
</head>
<body>
<div id="comments"></div>
</body>
I tried few things like changing "url to comments.php" to just "comments.php" but to no avail. JQuery won't even load simple .txt file. I checked and ID and .php file name are 100% correct. What's wrong?
The issue is you have setInterval() call within <script> with src pointing to jQuery. There are also extra parentheses at setInterval function which are not necessary. Use .ready() handler to wait until document is loaded before calling setInterval.
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js">
</script>
<script>
$().ready(function() {
var auto_refresh = setInterval(function () {
$("#comments").load('url to comments.php');
}, 1000);
});
</script>
</head>
The problem is you need to enclose your function within the <script> , right now it is started for <script src="jquery">
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
var auto_refresh = setInterval(
(function () {
$("#comments").load('url to comments.php');
}), 1000);
</script>
</head>
DEMO

How to listen to events fired on page load

How do you write a CasperJS test that can listen to an event fired on page load? The event I'm interested in fires at the end of the page body.
// my-page.html
<html>
...
<body>
...
<script type="text/javascript">
$(function() {
fireInterestingEvent();
});
</script>
</body>
</html>
I've tried injecting a client script but it seems to load after fireInterestingEvent() has already fired.
// test/my-test.js
casper.options.clientScripts.push("test/lib/my-client-script.js")
// test/lib/my-client-script.js
listenToInterestingEvent();
I've also tried initializing a test object before the page finishes loading but my object isn't staying on the DOM.
// test/my-test.js
casper.on('load.started', function() {
this.evaluate(function() {
window.testObject = { foo: 'bar' };
});
});
// my-page.html
<script type="text/javascript">
if (window.testObject) listenToInterestingEvent(); // window.testObject is undefined
fireInterestingEvent();
</script>
#Artjom B. figured it out in the comments section. Initializing an object on window during url.changed works but not during load.started.
// test/my-test.js
casper.on('url.changed', function() {
this.evaluate(function() {
window.testObject = { foo: 'bar' };
});
});
// my-page.html
<script type="text/javascript">
if (window.testObject) listenToInterestingEvent();
fireInterestingEvent();
</script>

Call to function in parent from .JS file from inside iframe

I have JS file with uploader functionality.
This file called from an iframe window.
I need to show alerts to user according to his actions.
Here is what I've done and it's not works:
From JS file:
$('#btnUpload').on('click', function(){
parent.CallToParent();
});
And from UploaderWindow call to:
function CallToParent()
{
parent.ShowAlert();
}
And on main window:
function ShowAlert()
{
alert('some alert');
}
I think you are doing it correct. Don't know if the parent.CallToParent() in the click event really refers to the function in the parent window. If it doesn't then you could do something like.
From JS file:
$(document).ready(function () {
$('#btnUpload').on('click', function() {
callParent();
})
});
And from iframe:
<script type="text/javascript" src="/common/jq.js"></script>
<script type="text/javascript" src="c.js"></script>
<script>
function callParent() {
parent.fn();
}
</script>
<input id="btnUpload" type="button" />
Main File
<script>
function fn() {
console.log('Parent function called');
}
</script>
<iframe src="b.html"></iframe>
To my knowledge, there's no interoperability of scripts between these two contexts.
If you have control of the iframe contents then you could implement a 'middle-man' service to pipe messages.

Why doesn't function get called on first page load, only after refreshing?

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();
}

From inside an iframe, how can I determine if the parent page has finished loading?

Are there any properties or events I can listen for from within the iframe to determine this?
The iframe src and parent page are on different domains.
Only if you can modify the parent page as well. If you can't, it's XSS and there's no legitimate way to do it.
parent.html:
...
<body onload="theFrame.parentLoaded()">
...
<iframe src="http://other.domain.com/frame.html" name="theFrame"></iframe>
...
frame.html:*
...
<script type="text/javascript" language="javascript">
function parentLoaded(){
//code here will be executed when the parent page has finished loading
}
</script>
...
I know you don't have control over the parent page, but if you can convince the host to add some code, you may be able to do something like the following:
//OnParent Page
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script>
var bReady = false;
$(document).ready(function () {
bReady = true;
});
function isReady() {
return bReady;
}
</script>
//in iframe page
<script>
var bReady = false;
while (bReady == false) {
bReady = window.opener.isReady();
}
</script>

Categories