Getting HTML Parent Window Won't Work. Suggestions? - javascript

I have the following two HTML Documents:
Main.html
<html lang="eng">
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
var ExamId = "001A";
function open_exam()
{
window.open("exam.html")
}
</script>
</head>
<body>
<input type=button value="Open Exam" onclick="open_exam()">
</body>
</html>
Exam.html
<html lang="eng">
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
function setParentInfo()
{
window.parent.document.ExamID = '001B';
}
</script>
</head>
<body>
<p>Welcome to the Exam!</p>
<input type=button value="Set Parent Info" onclick="setParentInfo()">
</body>
</html>
Main.html brings up Exam.html via the input button. From inside Exam.html I would like to change the variable ExamID on the parent document (i.e.: Main.html). I'm trying to do this via the JavaScript function: setParentInfo().
The above code is not working. Can someone help me come up with the correct code?
Thanks So Much!

Variables are assigned on the window object, not the document object.
Since the value is already set, you can instead read the existing value to verify it:
alert(window.parent.ExamId); // == "001A"

Variable is declared and assigned in parent window so you get reference from your child window.
you can test using alert statement:
alert(window.parent.document.ExamId);
//output::001B

Related

Why Can't I have access to the opener window in Chrome ? (Ok with IE)

window.opener doesn't work in Chrome. Ok for IE. Do you know why ?
Is it a problme of cross-document interactions ? I don't know why, files are in the same folder on my local computer.
I want the child window could access to the datas (DOM for exemple) of the parent window and modify them.
This is a example :
<html>
<head>
<title>Parent Window</title>
</head>
<body>
<input type="text" id="data" value="1234567" />
Open Child Popup window
<script>
function openChildWindow() {
window.open('child.html','childWindow','width=400,height=400');
}
</script>
</body>
And for the cild window child.html :
<html>
<head>
<title>Child Window</title>
<script>
function initializeMainDiv() {
document.getElementById("mainDiv").innerHTML = "Parent window data field value is: " +
window.opener.document.getElementById("data").value
}
</script>
</head>
<body onload="initializeMainDiv();">
<div id="mainDiv"></div>
</body>
</html>
It doesn't work on my chrome. I don't understand why, the code is simple.
I try with parent.window.openener, but the result is the same.

javascript global variables undefined?

Allow me to restate my problem. These are the givens:
main.html
<html>
<head>
`<script type="text/javascript" src="js/MyJS.js"></script>;`
</head>
<body>
<script>
document.getElementById("DisplayVar").innerHTML = a;
</script>
<div id="DisplayVar">
</div>
</body>
<html>
MyJs.js
var a = 1;
Nothing is displayed in the "DisplayVar" div, and the developer console says that (a) is undefined. Why is this?
You have to assign innerHTML of the "DisplayVar" div after creating it
<head>
<script type="text/javascript">
// or source to MyJS.js
var a = 1;
</script>
</head>
<body>
<div id="DisplayVar"></div>
<script>
if(document.getElementById("DisplayVar"))
document.getElementById("DisplayVar").innerHTML = a;
</script>
</body>
See codepen, I added a reference to an external js file, and used one of the variables defined there.
I also changed the position of the inline script. It should be placed after the creation of destination div element.

Access iframe variable from parent - undefined

I want to access a variable in iframe from parent index.html.
The index.html:
<!doctype html>
<html lang="en-us">
<head>
<title>Test</title>
</head>
<body>
<p>Test</p>
<div>
<iframe name="myIframe" id="test1" src="index2.html" width="100px" height="100px"></iframe>
</div>
<div>
<script type="text/javascript">
var clickParent = document.getElementById("test1").contentDocument.clicks;
function onClickP() {
console.log("click on parent: " + clickParent);
};
</script>
<button type="button" onClick="onClickP()">Click Parent Button</button>
</div>
</body>
</html>
The iframe index2.html:
<!doctype html>
<html>
<head>
<title>Clicks</title>
</head>
<body>
<script type="text/javascript">
var clicks = 0;
function onClick() {
clicks += 1;
console.log("click counts: " + clicks)
};
</script>
<button type="button" onClick="onClick()">Click Child Button</button>
</body>
</html>
In the console, the variable clickParent is "undefined". How to fix this and make the variable clickParent = clicks?
This question is not a duplicate of Sharing global javascript variable of a page with an iframe within that page because it is the opposite. I want to access the iframe's variable from the parent, not access parent's variable from the child. My Question, the variable that parent accesses from iframe is "undefined".
Any answers would be appreciated. Thank you.
Possibly a duplicate of this.
Declare global variables in the parent and set them in the iframe document using parent.var_name.
You can also access child vars by creating an object for the child document:
child_iframe = document.getElementById("iframe_id").contentWindow;
alert(child_iframe.var_name);
In my case, I was using the window.name on the parent. For accessing that on iFrame, I was using window.parent.name.

Javascript - subscribe to an event of a page from another page

I want to be able to open a popup using window.open and subscribe to page events (onload etc) of the popup in the opener. So i'd want a method in my opener (parent page) to execute when the popup's onload or ready fires. Is this possible using plain js or jquery? Pls don't ask me why i want to do this - this can solve a lot of issues for me.
First page (x.html):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var w = window.open('y.html', 'w');
w.document.getElementById('target').onclick = function () { alert('!'); };
</script>
</body>
</html>
Second page (y.html):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="target">target</button>
</body>
</html>
Works for me...

JavaScript: Why is it so with windows.parent?

Why is it so that when you use window.parent.showMessage("Video Is OK"); inside a .js file you've included on a page, it won't work, but only if it's on the page itself..?
Can you fix this?
There are two scenarios that I can think of where you'd want to use window.parent. The first is when you have a window open another window using window.open. The other is where the first window uses an iframe to load a page. In the former case, it appears as though you actually want to use window.opener, as ukostin has said. In the latter case, window.parent works fine. Both methods work properly whether the code is inline or loaded from an external JS file. Here are some tests:
POPUP
parentWindow.htm:
<html>
<head>
<script>function showMsg(msg){alert(msg);}</script>
<body>
Open
</body>
</html>
externalWindow.js:
function showMsgExternal(msg){window.opener.showMsg(msg);}
childWindow.htm:
<html>
<head>
<script>function showMsgInline(msg){window.opener.showMsg(msg);}</script>
<script src="externalWindow.js"></script>
</head>
<body>
Inline
External
</body>
</html>
IFRAME
parentFrame.htm:
<html>
<head>
<script>function showMsg(msg){alert(msg);}</script>
</head>
<body>
<iframe src="childFrame.htm" width="300" height="100"></iframe>
</body>
</html>
externalFrame.js:
function showMsgExternal(msg){window.parent.showMsg(msg);}
childFrame.htm:
<html>
<head>
<script>function showMsgInline(msg){window.parent.showMsg(msg);}</script>
<script src="externalFrame.js"></script>
</head>
<body>
Inline
External
</body>
</html>
Try to use window.opener as link to the parent window.

Categories