I am using window.opener.functionName() in IE to call the parent function from a child window, which is working perfectly fine. However, the same is not working in Chrome/Firefox.
I tried window.top.functionName(); parent.window.top.functionName() and numerous others. None are working.
Can anybody help!
EDIT
Here is the code.
Note that I have 2 level hierarchy. I need to call the updateHTML() function of Parent.jsp from ChildCall2.jsp file
Parent.jsp
<!DOCTYPE html>
<html>
<head>
<TITLE>Parent function call test</TITLE>
<script>
function openwindow(url)
{
Hints=window.open(url, 'Hints', "resizable=yes,scrollbars=yes,width=475,height=225");
if(Hints.blur)
Hints.focus();
}
function updateHTML()
{
alert("Parent called successfully");
}
</script>
</head>
<body onFocus="">
Click Me
</body>
</html>
ChildCall.jsp
<!DOCTYPE html>
<html>
<head>
<TITLE>Child function call test</TITLE>
<script>
function openwindow(url)
{
Hints=window.open(url, 'Hints', "resizable=yes,scrollbars=yes,width=475,height=225");
if(Hints.blur)
Hints.focus();
}
function updateHTML1()
{
alert("Parent call function");
window.opener.updateHTML();
}
</script>
</head>
<body onFocus="">
Click Me
</body>
</html>
ChildCall2.jsp
<!DOCTYPE html>
<html>
<head>
<TITLE>Child function2 call test</TITLE>
<script>
function openwindow(url)
{
Hints=window.open(url, 'Hints', "resizable=yes,scrollbars=yes,width=475,height=225");
if(Hints.blur)
Hints.focus();
}
function updateHTML2()
{
alert("Parent call function2");
window.opener.updateHTML1();
}
</script>
</head>
<body onFocus="">
Click Me to call parent function
</body>
</html>
All your pop-ups have the same name (window.open(url, 'Hints', ...)), this might confuse some browsers so they recognize some other window being their opener.
Just a sidenote, detecting if a window has blur method is unnecessary, just do Hints.focus().
Related
I'm working on an asp.net mvc project and i have a problem with some javascripts functions.
I would like to execute functionA (from layout) & functionB (from a webpage) when the page is loading.
_Layout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
</body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
function functionA() {
alert("Hello from Layout");
}
window.onload = functionA;
</script>
</html>
Webpage.cshtml:
#{
ViewData["Title"] = "***";
}
<div>
...
</div>
#section Scripts
{
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
function functionB() {
alert("Hello from WebPage");
}
window.onload = functionB;
</script>
}
window.onload is only working for the layout so when i'm going the the Webpage i can see "Hello from Layout" and not "Hello from Webpage".
Do you have an idea to perform both functions?
Thanks :) .
I managed to make it work like this:
window.onload = function () {
myFunction();
}
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>
I have a parent html file and want the user to click something which should then open a new window (or tab) containing the (dynamically generated) contents of a div in the parent (which is hidden in the parent).
From my reading here and elsewhere something like this should work:
parent.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Parent</title>
<script src="/js/jquery-1.11.0.min.js"></script>
</head>
<body>
<div id="from">
html from parent
</div>
<div id="launcher">
launch child
</div>
<script type="text/javascript">
$("#launcher").click(function() {
var child = window.open('child.html', '_blank', '', false);
if (child) {
var html = $("#from").html();
//window.setTimeout(child.addHTML(html), 5000);
child.addHTML(html);
}
else {
alert('Please allow popups for this site');
}
});
</script>
</body>
</html>
child.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Child</title>
<script src="/js/jquery-1.11.0.min.js"></script>
</head>
<body>
<div id="to"></div>
<script type="text/javascript">
function addHTML(html) {
$('#to').html(html);
}
</script>
</body>
</html>
However, regardless of using the commented-out setTimeout (incase the child hadn't loaded yet before calling the child's function), I get this error (in Safari, similar in Chrome) immediately:
'undefined' in not a function (evaluating 'child.addHTML(html)')
What am I doing wrong? Is there a better way to achieve my goals?
The first parameter of window.setTimeout should be the function to execute.
Try this:
if (child) {
var html = $("#from").html();
window.setTimeout(function(){child.addHTML(html);}, 5000);
}
I built a small example::
http://jsfiddle.net/rt19hv7v/
if the goal is only to add the content and not to call a function u can do it this way
if (child) {
child.addEventListener('load', function () {
var html = $("#from").html();
$('#to',child.document).html(html)
});
}else {
alert('Please allow popups for this site');
}
I need a pure JavaScript equivalent of this Jquery code:
because the use of libraries isnt allowed in my current project,
File handler.js
$(document).ready(function(){
$("#some_button").click(function(){
alert('ok. works');
});
});
File index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="handler.js"></script>
<head>
<body>
<button id="some_button">Btn</button>
</body>
</html>
Put this in your handler.js file:
window.onload = function() {
document.getElementById('some_button').addEventListener('click',
function() {
alert('ok. works');
}, true);
};
NB: this won't work on older IE versions that don't support addEventListener. You could be lazy and use the DOM0 element.onclick method instead.
function buttonClick() {
alert('ok. works');
}
File index.html
<!DOCTYPE html>
<html>
<head>
<head>
<body>
<button id="some_button" onclick="buttonClick()">Btn</button>
</body>
</html>
For example suppose I have
function myTest() {
return "test";
}
defined in <head>
In body if I try to call myTest() it fails. How can I make functions and variables accessible from body?
Script in the head tag will get parsed first, so your variables and functions are accessible from script in the body tag. Your problem must be elsewhere, because the following example works:
<!doctype html>
<html>
<head>
<script type="text/javascript">
function myTest() {
return "test";
}
</script>
</head>
<body>
<script type="text/javascript">
alert(myTest());
</script>
</body>
</html>
You need to place all JavaScript into <script>...</script> tags, OR, place it in event handling attributes (like onclick).
<html>
<head>
<script type="text/javascript">
function myTest() {
alert("hi");
}
</script>
</head>
<body>
<input type="button" onclick="myTest();" />
</body>
</html>
This is Your function in Head..
function myFunction(a)
{
return (a)
}
Then call like below
<script type="text/javascript">
myFunction(12);
</script>