使用 Javascript 将变量传递给弹出窗口 [英] Pass Variable to a Popup Window using Javascript
问题描述
我需要将一些文本从当前页面传递到一个弹出窗口，而不会导致服务器命中.信息(这里用 90 表示)已经在父表单中可用(它就像存储在隐藏变量中的一段长文本).我只需要将其显示为弹出窗口.
I need to pass some text from the current page to a popup window without going for a server hit. The information (herewith represented by 90) is already available in the parent form (it's like a paragraph-long text which is stored in a hidden variable). I just need to display that as a popup.
这是我尝试过的，这在某种程度上有效，但如果我传递文本而不是数字则不起作用.我的第二个担忧是解决方案看起来有点难看.有小费吗?谢谢.
Here's what I've tried, this works to some extent but doesn't work if I pass text, instead of a number. My second concern is that the solution kinda looks ugly. Any tips? Thank you.
这是 SCCE，你可以直接在你的机器上运行它.
This is SCCE, you can run it straight in your machine.
<html>
<head>
<title>A New Window</title>
<script type="text/javascript">
var newWindow;
var data;
function makeNewWindow(param) {
data = param;
if (!newWindow || newWindow.closed) {
newWindow = window.open("","sub","status,height=200,width=300");
setTimeout("writeToWindow()", 50); /* wait a bit to give time for the window to be created */
} else if (newWindow.focus) {
newWindow.focus( ); /* means window is already open*/
}
}
function writeToWindow() {
var k = data;
alert(data);
var newContent = "<html><head><title>Additional Info</title></head>";
newContent += "<body><h1>Some Additional Info</h1>";
newContent += "<scr"+"ipt type='text/javascript' language='javascript'> var localVar; localVar = "+ k +"; document.write('localVar value: '+localVar);</scr"+"ipt>";
newContent += "</body></html>";
// write HTML to new window document
newWindow.document.write(newContent);
newWindow.document.close( ); // close layout stream
}
</script>
</head>
<body>
<form>
<input type="button" value="Create New Window" onclick="makeNewWindow('90');" />
</form>
</body>
</html>
实际上，我在谷歌上搜索并看到了其他一些使用 window.opener.document.forms.element 的方法，但在这里，窗口必须事先知道它必须从父级读取什么.我需要能够通过它，因为它会有所不同:
Actually, I googled and saw some other approach that uses window.opener.document.forms.element, but here, the window has to know in advance what it has to read from the parent. I need to be able to pass it as it will vary:
<textarea rows="15" name="projectcontent" id="projectcontent" cols="87"></textarea>
<a href="javascript:;" onclick="window.open('viewcon.asp', 'my_new_window','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=yes, width=625, height=400');"><b>View Content</b></a>
<head>
<title>View Project Content</title>
</head>
<body>
<img src="/images/toplogo.jpg"><br/>
<script language="Javascript">
document.write(window.opener.document.forms['yourformname'].elements['projectcontent'].value)
</script>
<img src="/images/bottomlogo.jpg">
</body>
</html>
推荐答案
use window.opener
use window.opener
来自 Mozilla 开发者网络:当一个窗口从另一个窗口打开时，它维护一个引用到第一个窗口作为 window.opener.如果当前窗口没有opener，这个方法返回NULL.
From Mozilla Developer Network: When a window is opened from another window, it maintains a reference to that first window as window.opener. If the current window has no opener, this method returns NULL.
https://developer.mozilla.org/en-US/docs/Web/API/window.opener
通过这种方式，您可以在原始窗口上进行回调，并且您可以通知窗口它已加载并准备就绪，而不是等待随机延迟...
This way you can have on your original window a callback, and you can notify the window it's load and ready, rather than wait a random delay...
您在原始窗口上添加一个函数:
you add a function on the original window:
window.popupReady = function (callbackToPopup) {
callbackToPopup(newData);
}
然后弹出窗口可以告诉父窗口它已准备好并传递一个回调以使用数据更新它..
then the popup can tell the parent window it's ready and pass it a callback to update it with data..
并在弹出窗口中尝试以下操作:
and on the popup try something like:
window.dataReady(newData)
{
alert(newData);
}
document.addEventListener("load", function() { window.opener.popupReady (dataReady); }
我没有测试这段代码，但我会采取这样的方式，因为这应该确保 popupWindow 为您准备好并且符合 JavaScript 的精神.
I didn't test this code, but I would take such a path as this should ensure the popupWindow is ready for you and is along the spirit of JavaScript.
这篇关于使用 Javascript 将变量传递给弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
