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.
Related
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 am looking for the JavaScript code that can assist me in getting something similar to the button onclick event. Please take a look at the code below.
Javascript code
<script type='text/javascript'>
function myPopup() {
var overlay = $('<div id="overlay"></div>');
$('.x').click(function() {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
var obj = document.getElementsByClassName('clickLink');
// alert("name");
myScript = function() {
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
return false;
};
obj[0].addEventListener("click", myScript);
}
</script>
HTML Code
<div class='popup'>
popup content here
</div>
<div id='container'>
<button class='clickLink'>
Click Here to See Popup!
</button>
<!-- this is working 5ne i called class in javascript -->
<button type="submit" onclick='myPopup();'>
Click Here to See Popup!
</button>
<!-- but developers need like onclick event -->
</div>
</body>
This popup script is working fine but I need an onclick event like button onClick='myfunction()'
please any one help me Thanks
If I understand correctly you want to know how onclick event works in JavaScript, if that is the case as your question is not entirely clear, try something to the effect of the following:
<!DOCTYPE html>
<html>
<body>
<p>Click "Try it" to execute the displayDate() function.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").onclick = displayDate;
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
I Just can't find the answer to this.
I have a div in my webpage, above on a different layer. I simply want to have a button or tag inside this div which will hide it. I have tried:
<html>
<head>
<script language="javascript">
myFunction()
{
document.getElementById("corporate_background").setAttribute("style", "display:none;");
}
</script>
</head>
<body>
<p>aajhahaksha</p>
<div id="corporate_background">
Close
<P>content...</P>
</div>
</body>
Could someone please show me where I have gone wrong.
Do this:
<html>
<head>
<script language="javascript">
function myFunction()
{
document.getElementById("corporate_background").setAttribute("style", "display:none;");
}
</script>
</head>
<body>
<p>aajhahaksha</p>
<div id="corporate_background">
Close
<P>content...</P>
</div>
</body>
This is just because you didn't define myFunction() as a function .
Next time, open your debugger with F12, and see what it is saying... !
You missed out declaring your function at the beginning
myFunction()
{
document.getElementById("corporate_background").setAttribute("style", "display:none;");
}
You should declare using the keyword function.
function myFunction()
{
document.getElementById("corporate_background").setAttribute("style", "display:none;");
}
You should probably use an event listener on your anchor also instead of using inline javascript. No harm just best practice.
Try this:
<html>
<head>
<script language="javascript">
function myFunction()
{
document.getElementById("corporate_background").style.display='none';
}
</script>
</head>
<body>
<p>aajhahaksha</p>
<div id="corporate_background">
Close
<P>content...</P>
</div>
</body>
</html>
I think what you wanna do is hide the content, so you can hide content like this,
Make the button ;
<button id="btn" name="button">Hide content</button>
By clicking the button it wil hide the div corporate_background
<script>
$(document).ready(function () {
$('#btn').click(function () {
$('#corporate_background').hide();
});
});
</script>
Sample code:
<html>
<head>
.....
</head>
<body>
<div id="content">
<form>
....
<input type="submit" onclick="loadAnotherPage()"/>
</form>
</div>
</body>
</html>
I want to load another page say edit_profile.php in the content div. How can it be achieved without refreshing the page?
I tried to use jQuery load() method. But looks like I missed something. Any help would be highly appreciated.
When you click submit button it's submit form and page refresh that's why its not working.
Instead of type submit set button and then set function onclick.
function loadAnotherPage(){
$("#content").load('edit_profile.php');
}
$(document).ready(
function() {
$('#load_file').click(
$.post('edit_profile.php',
{},
function(data){
$("#content").html(data);
},''
)
);
}
);
Try this
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
<button id="loadpage">load new page</button>
<script>
$(document).ready(function () {
$("#loadpage").click(function() {
$.get("edit_profile.php", function(response){
$("#content").html(response);
});
})
});
</script>
</body>
</html>
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.