When having the following HTML page (index.html)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Parent</title>
</head>
<body>
<iframe src="iframe.html"></iframe>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
$(function(){
console.log("document ready");
$("iframe").on("load", function(){
console.log("iframe loaded");
});
});
</script>
</body>
</html>
and the following iframe.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Child</title>
</head>
<body>
<p>Lorem ipsum</p>
</body>
</html>
the console output will look like:
However, the log "iframe loaded" is missing. It seems that .on("load") is not getting fired on the iframe.
Does anyone know why?
Edit:
Of course I am having JavaScript activated (otherwise I wouldn't see any log messages)
I can not edit iframe.html so using postMessage etc. is not a workaround for me
I have tested this in the latest FF (47.0a2) and Chrome (49)
The Code is working perfectly . Maybe the path that you provided for iframe is wrong. Check if they are in the same folder
Check if javascript is enabled in your browser
Edit:
or try to replace your index.html code with:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Parent</title>
<script type="text/javascript">
function handleOnLoad(el) {
// el is the actual iframe
console.log("iframe loaded");
}
</script>
</head>
<body>
<iframe src="iframe.html" onload="handleOnLoad(this)"></iframe>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
$(function(){
console.log("document ready");
$("iframe").on("load", function(){
// console.log("iframe loaded");
});
});
</script>
</body>
</html>
Your code <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
$(function(){
console.log("document ready");
$("iframe").on("load", function(){
console.log("iframe loaded");
});
});
</script>
has to be inside iframe.html
So your pages look like below post modifications.
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Parent</title>
</head>
<body>
<iframe src="iframe.html"></iframe>
</body>
</html>
iframe.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Child</title>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
$(function(){
console.log("document ready");
$(window).on("load", function(){
console.log("iframe loaded");
});
});
</script>
</head>
<body>
<p>Lorem ipsum</p>
</body>
</html>
Related
after to make some research I took the measures to guarantee that the JS will be loaded before trying to run it but... it won't work!
This works:
<!DOCTYPE html>
<head>
<meta name="viewport" content="initial-scale=1" charset="utf-8">
</head>
<html>
<body>
<script type="text/javascript">
function initialize() {
console.log('foo')
}
window.onload = function() {
initialize();
};
</script>
</body>
</html>
But this doesn't:
<!DOCTYPE html>
<head>
<meta name="viewport" content="initial-scale=1" charset="utf-8">
</head>
<html>
<body>
<script type="text/javascript" src="test.js">
<script type="text/javascript">
window.onload = function() {
initialize();
};
</script>
</body>
</html>
test.js:
function initialize() {
console.log('foo')
}
I don't get any error. It just doesn't work. What am I doing wrong?
Thanks!
You need a closing script tag for the tag that is calling the external js file.
<script type="text/javascript" src="test.js"></script>
I have following two pages and I am trying to send message from the main page to an iframe inside it. It is working correctly in IE 11 but not on Chrome. I don't see the pop-up or the console message in Chrome browser. The Chrome browser version is 60.0.3112.113.
HtmlPage1.html - http://localhost/Htmlpage1.html
<!DOCTYPE html>
<html id="root">
<head>
<meta charset="utf-8"/>
<title>Sheep</title>
</head>
<body id="b">
<iframe id="myFrame" src="http://localhost/HtmlPage2.html" height="200" width="300" seamless></iframe>
<script type="text/javascript">
"use strict";
window.addEventListener("DOMContentLoaded", function() {
var myFrame = window.document.getElementById("myFrame").contentWindow;
myFrame.postMessage("A cow", "*");
}, false);
</script>
</body>
</html>
HtmlPage2.html - http://localhost/Htmlpage2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Drococile</title>
</head>
<body>
<h1>Fat Sheep :D</h1>
<script type="text/javascript">
window.addEventListener("message", function(event) {
alert(event.data);
console.log(event.data);
}, false);
</script>
</body>
</html>
Thanks
Easiest fix is to wait for the iframe to load
var myFrame = window.document.getElementById("myFrame");
myFrame.onload=function() {
myFrame.contentWindow.postMessage("A cow", "*");
};
Hi I am trying to run Alert function on page load using jquery but it's not working for me.
Please let me know if I am wrong somewhere thanks.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#alertcall').load(function(d){
alert("Image loaded.");
})(document);
});
</script>
</head>
<body>
<div id="alertcall"></div>
</body>
</html>
Not sure I understand what you are doing, so you are trying to get jQuery to output an alert? Perhaps this will work.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id="alertcall"></div>
<script>
$(document).ready(function () {
$('#alertcall').load(function(d){
alert("Div loaded");
})(document);
});
</script>
</body>
</html>
Try using this. You can check whether the element with id alertcall exists or not.
<script>
$(document).ready(function () {
if($('#alertcall').length){
alert("image loaded");
}
});
</script>
Looks like you are trying to perform some action when image loads. Use image instead of div.
$(function() {
$('#myImage').load(function(d) {
alert("Image loaded.");
});
}); < /script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<img id="myImage" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/03/high-resolution-wallpapers-2.jpg" alt="high resolution image">
</body>
</html>
Change image URL to test again to avoid cached image
$(function() {
$('#myImage').load(function(d) {
alert("Image loaded.");
});
}); < /script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<img id="myImage" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/03/high-resolution-wallpapers-2.jpg" alt="high resolution image">
</body>
</html>
I'm new to jQuery programming and want to solve page changes after fading effect.
I heard that using callback method. but don't know how to use please give me some advice!!!
"Scene2.html" is where I want to move.
enter code here
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function(){
$("#first").fadeOut(1500);
});
</script>
</head>
<body>
<img id="first" src="images/Logop.jpg"/>
</body>
</html>
You'd do it this way:
jQuery(function(){
$("#first").fadeOut(1500, function() {
window.location.href = 'Scene2.html';
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="first" src="http://cdn.hark.com/images/000/003/249/3249/original.jpg">
I'm trying to use jquery get method
this is jtest.html:
<!DOCTYPE html>
<html>
<body>
fdsffdsf
</body>
</html>
and this is the page that should get the data from jtest.html:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.load("jtest.html", function(data){
alert("Data: " + data);
});
});
</script>
<body>
<h1>My First Heading</h1>
</body>
</html>
Nothing happens when I run it please help
Try Jquery code to get data from another page.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
jQuery.get('jtest.html', null, function(tsv) {
alert(tsv);
});
});
</script>
</head>
<body>
<h1>My First Heading</h1>
</body>
</html>
You need to put your <script> inside <html> and <head> tag:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
<script>
$(document).ready(function(){
$.load("jtest.html", function(data){
alert("Data: " + data);
});
});
</script>
</head>
<body>
<h1>My First Heading</h1>
</body>
</html>
Also make sure that jtest.html is located at the same directory as your current HTML file
You're missing the closing </script> tag when loading the jquery library!
Try this work perfectly:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).load("jtest.html", function(data){
alert("Data: " + data);
});
});
</script>
</body>
</html>