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
Related
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>
Is it possible to tell from a parent window if a popup window has fully loaded?
<body>
<div id="btn">display web page</div>
<div id="somediv">
</div>
</body>
I write the following script to determine if the pop up is already loaded, but it does not work.
<script>
$("#somediv")[0].onload = function(){
alert('loaded');
console.log("rr");
};
</script>
Is this what you want?
<body>
<div id="btn">display web page</div>
<div id="somediv">
</div>
</body>
$("#somediv").load("a.html", function(){
alert('loaded');
console.log("rr");
});
https://jsfiddle.net/jboo92k4/1/
Is this what you were looking for?
<html>
<head>
<script type="text/javascript">
var winPop;
function OpenWindow() {
winPop = window.open("popupwin.html");
CheckWinStatus();
}
function CheckWinStatus() {
try {
asdf = winPop.document.body;
WindowLoaded();
}
catch(e) {
setTimeout("CheckWinStatus()",1000);
}
}
function WindowLoaded() {
alert(winPop.document.title);
}
</script>
</head>
<body>
<form name="Form1">
<input type="button" name="B1" value="Open" onclick="OpenWindow()">
</form>
</body>
</html>
The function OpenWindow() is called when button b1 is clicked.
Inside OpenWindow(), a popup window popupwin.html is made to open.
CheckWinStatus() checks whether the popup has fully loaded or not. It has a timeout value of 1000 ms.
When the popup window has fully loaded, WindowLoaded() is called. This is where you would perform your popup dependent action.
I have the following code that works:
<html>
<head>
<script>
function loaded(){
oFormElement = document.forms['test form'].elements["txtStatus"];
oFormElement.value = "just loaded";
}
</script>
</head>
<body onload="loaded()">
<p>my first socket.io test</p>
<form id = "test form">
<input type="text" id ="txtStatus" value="">
</form>
</body>
</html>
now, if I include the reference to socket.io, it stops working
<html>
<head>
<script src="socket.io/socket.io.js">
<script>
function loaded(){
is this because socket.io handles from elements in it's own way, or is because the browser cannot find socket.io ? Is there any way to debug this/fix this ?
You need to close the first <script> tag...
<html>
<head>
<script src="socket.io/socket.io.js"></script>
<script>
function loaded(){
// ...
I have 3 html pages. main.html, page1.html and page2.html. I am displaying page1.html and page2.html in main.html using following code.
<!DOCTYPE html>
<html>
<frameset frameborder="1" rows="50%, *">
<frame name="f1" src="Page1.html" />
<frame name="f2" src="Page2.html"/>
</frameset>
</html>
page1.html code
<!DOCTYPE html>
<html>
<head>
<style>
.content {display:none;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="myjs.js"></script>
</head>
<body>
<table id="resultDetails" border="1">
<th>Result Details</th>
<tr>
<td>
Click on me to see more details in other page
<div class="content">
<p> R1 data</p>
</div>
</td>
</tr>
</table>
</body>
</html>
And Page2.html code
<!DOCTYPE html>
<html>
<body>
<div id="myDiv">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="myjs.js"></script>
</body>
</html>
My JavaScript myjs.js
$(document).ready(function () {
$('table').on('click', 'tr', function () {
var doc =window.top.frames['f2'].document;
var divElmnt = $(doc.getElementById('myDiv'));
$(divElmnt.html($(this).find('.content').html()));
});
});
With this code, on clicking on table row, i am able to display the div "content" content in "mydiv" div of page2.
This works in IE and FF but wont work in Chrome. Error: doc is undefined.
What is the equivalent for window.top.frames['f2'] for chrome.
Give your FrameSet and your Frame an ID:
var $fs = $("#fs");
var f2 = $fs.find("#f2");
f2 is now a jQuery object.
Issue was with Chrome security flag for local files i.e., file:/// . After launching Chrome with "--allow-file-access-from-files" flag option, top.frames worked.
Also I found a useful document on Inter-Frame Communication with JavaScript here.
I just started learning JavaScript and am wondering why this simple snippet hangs when I click on the "Call function" button. What am I missing?
<html>
<head>
<script type="text/javascript">
function myfunction()
{
document.write("hello");
}
</script>
</head>
<body>
<form>
<input type="button"
onclick="myfunction()"
value="Call function">
</form>
</body>
</html>
You need to write inside an element or give an element a value, or you should use document write like that :
<html>
<head>
<script type="text/javascript">
function myfunction()
{
document.getElementById("lblMessage").innerText = "hello";
document.getElementById("txtMessage").value = "hello";
//document.write("hello");
}
</script>
</head>
<body>
<form>
<script type="text/javascript">
document.write("This is written while page processed by browser !<br />");
</script>
<input type="text" id="txtMessage" /><br />
<span id="lblMessage"></span><br />
<input type="button"
onclick="myfunction()"
value="Call function">
</form>
</body>
</html>
If you simply want to see your button doing something then try:
alert("Hello");
instead of the document.write.
Where do you expect the function to output its "hello"? Right into the button's source code? That makes no sense. The browser is confused and hangs.
Document.write doesn't magically insert something at the end of your document. It writes its stuff out right there where it is called.
Not too sure what you mean by "hang"... Try this out... The alerts can be removed, but will inform you of where it is at in execution...
<html>
<head>
<script type="text/javascript">
function myFunction() {
//for debugging
alert('Made it into function');
document.getElementById('MyOutputDiv').innerHTML = 'Word To Your Mom...';
//for debugging
alert('function complete');
}
</script>
</head>
<body>
<input type='button' onclick='myFunction();' value='Call Function'>
<br>
<div id='MyOutputDiv'></div>
</body>
</html>
document.write, but where? You have to specify this.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello</title>
</head>
<body>
<pre><script type="text/javascript">
function myfunction() {
d = document.getElementById('hello');
d.style.display = "block";
d = document.getElementById('callme');
d.style.display = "none";
}
</script>
</pre>
<div id="hello" style="display:none">
Hello
</div>
<div id="callme">
<input type="button"
onclick="myfunction()"
value="Call function">
</input>
</div>
</body>
</html>
I can't explain the "hang" but please take a look at this page for a primer on document.write: http://javascript.about.com/library/blwrite.htm I would also like to second that you probably want to write to a specific element in the page rather than just overwriting the entire page.