Thi*_*gan 5 html javascript jquery
我想像gmail聊天弹出窗口一样弹出窗口,以及我想像gmail一样弹出窗口.
一旦弹出完成,特定div应该在新窗口中打开,一旦弹出完成特定div应该放在已经存在的位置,到目前为止我能够弹出窗口带有以下代码的新窗口,但我不知道怎么做pop-in
请注意:一旦pop-out完成特定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>
UPDATE
我已经找到了如何在新窗口中打开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>
小智 0
我会在窗口扩展的页面上创建一个命名窗口，称为例如。“家窗”。然后使用与您所拥有的类似的方式扩展窗口，除了使用 _blank 为其指定一个特定名称，例如“ExpandedWindow”，例如。
window.open("http://YourLink.TLD","ExpandedWindow","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
然后在弹出的“缩回”窗口中使用单击功能。
window.open(document.URL,"HomeWindow");
ExpandedWindow.close();