I have an html file named first.html which has an iframe element to load another html file named second.html. How can we communicate between these two html files. I have tried to trigger an event from the second.html and to catch the same on first.html. But event propagation is not successful.
Here is the first.html file
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" />
<script>
function onLoad(){
alert("onLoad");
var iframe = $('#iframeID').contents();
iframe.find("#button").on("SUBMIT",function(){
// business logic
alert("Clicked");
});
}
</script>
</head>
<body>
<iframe id="iframeID" onload="onLoad()" height="1000" width="1000" src = './second.html'></iframe>
</body>
</html>
Here is the second.html file
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" />
<script>
function myFunction(){
$('#button').trigger("SUBMIT");
};
</script>
</head>
<body>
<button id="button" type="button" onclick="myFunction()">Click me</button>
</body>
</html>
You can't use jquery to communicate ,
Because Event bubbling stops at root of the document and that is iframe container and doesn't reach host document.
You can use the Post message to communicate.
Try this code it's works .
Here is the first.html file.
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
// addEventListener support for IE8
function bindEvent(element, eventName, eventHandler) {
if (element.addEventListener){
element.addEventListener(eventName, eventHandler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, eventHandler);
}
}
// Listen to message from child window
bindEvent(window, 'message', function (e) {
alert("Got the message from child");
});
</script>
<body>
<iframe name="iframeID" height="1000" width="1000" src = './second.html'></iframe>
</body>
</html>
second.html
<!DOCTYPE html>
<html>
<body>
<head>
<button id="button" type="button" onclick="myFunction()">Click me</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"/>
<script>
function myFunction(){
var message = 'Send the message to parent ';
window.parent.postMessage(message, '*');
};
</script>
</body>
</html>
Related
When I click The button it does not show me any output on the console window
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click me">Click me</button>
<script type="text/javascript" src="script.js">
</body>
</html>
->js
var printNumber=document.getElementById('Click me');
printNumber=document.addEventListener('Click',showNo);
function showNo() {
console.log('I was Clicked');
}
You have a few issues with your code.
Firstly you need to close your <script> tag in your HTML:
<script type="text/javascript" src="script.js"></script>
Secondly, your id shouldn't have spaces in it. You can change it to something like btn-click:
<button type="button" id="btn-click">Click me</button>
And then make sure to target it properly in your Javascript:
var printNumber=document.getElementById('btn-click');
Thirdly, your event name should be lowercase (as Javascript is case-sensitive), so change "Click" to "click"
Lastly, you want to add the click event listener to your button, which is stored in the variable printNumber. At the moment you are adding the event listener to your document and not the button. To add it to your button you can use:
printNumber.addEventListener("click", showNo); // add click event listener to button
See working example below:
var printNumber = document.getElementById('btn-click'); // change id selector
printNumber.addEventListener('click', showNo); // change 'Click' to 'click'
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title>Awesome button</title>
</head>
<body>
<button type="button" id="btn-click">Click me</button> <!-- change id -->
<script type="text/javascript" src="script.js"></script> <!-- close script -->
</body>
</html>
It should be click not Click!
JavaScript is a case-sensitive language. This means that the language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters.
var printNumber=document.getElementById('Click me');
printNumber=document.addEventListener('click',showNo);
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click me">Click me</button>
</body>
</html>
You had one typo Click which is supposed to be click.
`printNumber=document.addEventListener('Click',showNo);`
^^^^^^^^
you should add event listener to that particular element not to the complete document.
var printNumber=document.getElementById('Click_me');
printNumber.addEventListener('click',showNo);
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click_me">Click me</button>
</body>
</html>
Created two simple html files test.html and frame.html and here I am loading frame.html inside the test.html. But calling functions of frame.html in the test.html is not working, its giving function not defined
test.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<h3 align="center">TEST AB TEST</h3>
<div id="load_frame" ></div>
<div style='padding:30px;background-color:red; '>
<input id="test_Button" type='button' value='test_Button'/>
</div>
<script>
$(function(){
$('#load_frame').append('<object data="frame.html"/>');
});
$("#test_Button").bind( "click",function(){
console.log('aaaaaaaa');
myFunction1();
});
</script>
</body>
</html>
frame.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<h3 align="center">TEST Frame</h3>
<div style='padding:30px;width:500px;'>
<input id="frame_button" type='button' value='frame_button'/>
</div>
<script>
function myFunction1() {
alert('Inside frame');
}
$("#frame_button").bind( "click",function(){
myFunction1();
console.log('aaaaaaaa');
});
</script>
</body>
</html>
Error
Uncaught ReferenceError: myFunction1 is not defined
You need to call the function in the context of the frame window
$("#test_Button").bind( "click",function(){
//reference to the frame window
var frameWindow =$('#load_frame object')[0].contentWindow;
// the function is a property of that window
frameWindow.myFunction1();
});
DEMO
You can not simply access the content of an other frame. This fact is implementet by browser vendors for security reasons.
If you really want to "talk" between frames you can use postMessage for that: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
I want to call an onload event before an focus event in a HTML page.
In my following code
<!DOCTYPE html>
<html>
<head>
<body onload='onloading()'>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).focus(function(){
callMe();
});
});
function callMe()
{
alert('Focus is on current page');
}
function onloading()
{
alert('Onload function call ');
}
function myFunction()
{
document.write("some text");
}
document.getElementById("demo").innerHTML = myFunction();
</script>
</head>
<p id="demo"></p>
</body>
</html>
When I execute this code then i get an a pop up as "Focus on current page " and in the back ground " some text" . But I expect to get an output in the following order
"some text"" in the back ground
"Onload function call" popup
"Focus is on current page" pop up .
But I am not getting the pop up "Onload function call" :( . I need to run the onload event in the body before the focus event. IS it possible to do such a thing ?
Try this:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<p id="demo"></p>
<p id="focus">Click here</p>
<script type="text/javascript">
function callMe()
{
$("#focus").html('Focus is on current page');
}
function onloading()
{
alert('Onload function call ');
}
function myFunction()
{
$("#demo").html("some text");
}
$(window).load(function () {
onloading();
});
$(document).ready(function(){
$("#demo").html= myFunction();
$(window).focus(function(){
callMe();
});
});
</script>
</body>
</html>
Your HTML is invalid. You have put the head tag inside the body which is not allowed.
Make use of the following structure:
<html>
<head>
<script></script>
</head>
<body>
</body>
</html>
Is it possible to load js file on some event like mouseover or click?
I try to load a whole js file not a specific function.
This example loads the specified js file on onClick() event of button
<button onclick="myFunction()">Click me</button>
<script type="text/javascript">
function myFunction(){
var file = document.createElement("script");
file.setAttribute("type", "text/javascript");
file.setAttribute("src", "js/js_file.js");
document.getElementsByTagName("head")[0].appendChild(file);
}
</script>
Similarly, you can also load the js on onMouseOver() event of the button or any other HTML element.
Example using jQuery
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myButton').mouseenter(function() {
$("head").append($("<script />").prop("type", "text/javascript").prop("src", "http://code.jquery.com/jquery.mobile-1.2.0.js"));
});
});
</script>
</head>
<body>
<input type="button" id="myButton" value="CLICK" />
</body>
</html>
I have two iframes in the document movie.htm:
<iframe id='movies' class='top' frameborder='0'></iframe>
and
<iframe src="moviesearch.htm" class="bottom" frameborder="0">
Within moviesearch.htm there is an input tag
<input id="search_str" type="text">
I was wondering how I access this value (contained in moviesearch.htm) using JavaScript in the document movie.htm.
As the user is typing the field continuously it would require that the value be updated real-time within movie.htm.
How would I achieve this in JavaScript?
If both pages are in the same domain, you'll be able to iframe.contentDocument. https://developer.mozilla.org/en/XUL/iframe#p-contentDocument
postMessage.
https://developer.mozilla.org/en/DOM/window.postMessage
movie.htm:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Current value:<div id="updatedvalue"></div>
<iframe src="moviesearch.htm"></iframe>
</body>
<script>
window.addEventListener
("message", function(e) {
document.getElementById("updatedvalue").innerHTML = e.data;
}, true);
</script>
</html>
moviesearch.htm:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" onkeyup="sendMessage(this.value)">
</body>
<script>
function sendMessage(message) {
window.parent.postMessage(message, "*");
}
</script>
</html>