【发布时间】:2014-01-17 00:41:32
【问题描述】:
我想像 gmail 聊天弹出窗口一样弹出窗口,也想要像 gmail 那样弹出窗口。
一旦弹出完成,特定的 div 应该在新窗口中打开,一旦弹出完成,特定的 div 应该被放置在它已经存在的位置,到目前为止我能够弹出带有以下代码的新窗口中的窗口,但我不知道如何弹出窗口
请注意:一旦弹出完成,特定的 div 应该在另一个窗口中打开,并且主窗口中的变量也应该可以在弹出窗口中访问。
在Jsfiddle 锻炼身体 弹出演示
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
//<![CDATA[
$(function(){
$('.popup').click(function (event) {
event.preventDefault();
window.open($(this).attr("href"), "popupWindow",
"width=600,height=600,scrollbars=yes");
});
});//]]>
</script>
</head>
<body>
<a href="http://google.com" class="popup">google</a>
</body>
</html>
更新
我找到了如何在新窗口中打开div的选项,代码如下,现在我可以弹出带有div内容的窗口,现在我需要知道如何访问变量中的值弹出窗口以及如何将弹出窗口附加到原来的位置
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>
Popup demo
</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js">
</script>
</head>
<body>
<a href="#" class="popup">
google
</a>
<div id="toNewWindow">
Testing
<input type="button" onclick="test()" value="click">
</div>
<script type="text/javascript">
//<![CDATA[
$('.popup').click(function (event) {
event.preventDefault();
var w = window.open("","myWin","height=400px,width=600px");
w.document.write( $("#toNewWindow").html() );
$('#toNewWindow').detach();
});
var a=3;
function test()
{
alert(a);
}
//]]>
</script>
</body>
</html>
第二次修改
现在我找到了访问opener和child之间变量的方法,代码如下
现在我的问题是
如果我在 child.html 中的文本框中键入了 iframe 中的文本框,则在弹出窗口时不显示。
开瓶器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Popup checking</title>
<script type="text/javascript">
var winObj;
function openwindow()
{
winObj=window.open("","_blank","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
var s=document.getElementById('page').innerHTML;
console.log(s);
//var s=document.getElementById('page');
winObj.document.write(s);
//win.parent.detach(win);
}
function changeValue()
{
console.log(winObj.document.getElementById('changer').value);
winObj.document.getElementById('changer').value='changer';
}
</script>
</head>
<body>
<div id="page">
<iframe src="child.html" width="100" height="100"></iframe>
</div>
<div id="page1">
<input type="text" id="text1"/>
<input type="button" value="popup" onclick="openwindow()"/>
<input type="button" value="changevalue" onclick="changeValue()"/>
</div>
</body>
</html>
儿童
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function openerChange()
{
window.opener.document.getElementById('text1').value="Value changed.."
}
</script>
</head>
<body>
<input type="text" value="" id="changer" />
<input type="button" value="changed" onclick="openerChange()"/>
</body>
</html>
【问题讨论】:
-
@rps 感谢您的回复,是的,我只是期待,我觉得我在我的问题中解释了这一点,我不知道该怎么做。
-
对不起,您想在新窗口中弹出一个窗口吗?如果您需要任何弹出式弹出式功能,您总是可以在 html 和 javascript 中进行一些自定义编码,对吧?
-
@Shahe 没问题,但在我的情况下,图表、销售分析等所有内容都将在单个窗口(html 页面)中,有时我们需要弹出该内容,我们将把它显示在另一台显示器(4 显示器)上,如果你不明白我在说什么,请回复我,因为我很着急,我会错过正确解释的。
-
这个问题已经很老了,但这可能会有所帮助:stackoverflow.com/questions/4667714/…
-
也许你需要写一个 Chrome 扩展来代替?我不明白您如何才能让新窗口重新连接
标签: javascript jquery html