This post explains a Javascript technique called "Inter-window communication". You could use this technique in VisualForce pages to open a pop-up window and have both windows talk among them.
For this post I'll have two HTML windows: A opener window and a pop-up window.
Opener.html:
<html>
<head>
<title>*** OPENER ***</title>
</head>
<body>
<form id="form1" runat="server">
<table border="1">
<tr>
<th>
Counter:
</th>
<td>
<input type="button" onclick="Count();" value="Count" />
<input type="text" id="ShowCounter" value="0" />
</td>
</tr>
<tr>
<th>
Message:
</th>
<td>
<input type="button" onclick="Write();" value="Write" />
<span id="OutMsg">...</span>
<input type="text" id="InMsg" value="..." />
</td>
</tr>
<tr>
<th>
Other Window:
</th>
<td>
<input type="button" onclick="OpenWindow();" value="Open Window" />
<input type="button" onclick="UpdatePopPup();" value="Update PopUp" />
<input type="button" onclick="UpdateIFrame();" value="Update IFrame" />
</td>
</tr>
</table>
</form>
<iframe id="MyFrame" name="MyFrame" src="pop-up.html" width="600px" height="150px">
</iframe>
</body>
</html>
<script type="text/javascript" language="javascript">
// Local Scripts
function Count() {
var objCounter = document.getElementById('showCounter')
objCounter.value = ++objCounter.value;
}
function Write() {
WriteMessage(document.getElementById('InMsg').value);
}
function WriteMessage(inMsg) {
var objMsg = document.getElementById('OutMsg');
objMsg.innerHTML = inMsg;
}
</script>
<script type="text/javascript" language="javascript">
// Other window scripts
var newWindow = null;
function OpenWindow() {
newWindow = window.open('pop-up.html');
}
function UpdateOpener(txtMsg, txtCounter) {
document.getElementById('InMsg').value = txtMsg;
document.getElementById('ShowCounter').value = txtCounter;
Write();
}
function UpdatePopPup() {
if (newWindow != null) {
Write();
var txtMsg = document.getElementById('InMsg').value;
var txtCounter = document.getElementById('ShowCounter').value;
newWindow.UpdatePopPup(txtMsg, txtCounter);
}
}
function UpdateIFrame() {
if (document.getElementById("myFrame") != null) {
Write();
var txtMsg = document.getElementById('InMsg').value;
var txtCounter = document.getElementById('ShowCounter').value;
document.getElementById("myFrame").contentWindow.UpdatePopPup(txtMsg, txtCounter);
}
}
</script>
pop-up.html:
<html>
<head>
<title>*** POP-UP ***</title>
</head>
<body>
<form id="form1" runat="server">
<table border="1">
<tr>
<th>
Counter:
</th>
<td>
<input type="button" onclick="Count();" value="Count" />
<input type="text" id="ShowCounter" value="0" />
</td>
</tr>
<tr>
<th>
Message:
</th>
<td>
<input type="button" onclick="Write();" value="Write" />
<span id="OutMsg">...</span>
<input type="text" id="InMsg" value="..." />
</td>
</tr>
<tr>
<th>
Other Window:
</th>
<td>
<input type="button" onclick="CloseWindow();" value="Close Window" />
<input type="button" onclick="UpdateOpener();" value="Update Opener" />
</td>
</tr>
</table>
</form>
</body>
</html>
<script type="text/javascript" language="javascript">
// Local Scripts
function Count() {
var objCounter = document.getElementById('showCounter')
objCounter.value = ++objCounter.value;
}
function Write() {
WriteMessage(document.getElementById('InMsg').value);
}
function WriteMessage(inMsg) {
var objMsg = document.getElementById('OutMsg');
objMsg.innerHTML = inMsg;
}
</script>
<script type="text/javascript" language="javascript">
// Other window scripts
function CloseWindow() {
window.top.close();
UpdateOpener();
}
function UpdateOpener() {
if (window.opener != null) {
Write();
var txtMsg = document.getElementById('InMsg').value;
var txtCounter = document.getElementById('ShowCounter').value;
window.opener.UpdateOpener(txtMsg, txtCounter);
}
if (window.parent.frames.length>0) {
Write();
var txtMsg = document.getElementById('InMsg').value;
var txtCounter = document.getElementById('ShowCounter').value;
window.parent.UpdateOpener(txtMsg, txtCounter);
}
}
function UpdatePopPup(txtMsg, txtCounter) {
document.getElementById('InMsg').value = txtMsg;
document.getElementById('ShowCounter').value = txtCounter;
Write();
}
</script>
The pop-up works because:
- When the window is opened (opener.html, line 63), the window is assigned to a variable "newWindow".
- On the pop-up window, the javascript refers to the "window.opener" object (pop-up.html, line 70).
The IFrame works on a similar concept, but the syntax is a bit different.
No comments:
Post a Comment