javascript打开新窗口，并向其中写入内容，打开的窗口获取父窗口中的内容。

最新推荐文章于 2023-01-22 17:18:04 发布

yangsl

最新推荐文章于 2023-01-22 17:18:04 发布

阅读量533

点赞数

分类专栏： JavaScript 文章标签： JavaScript Chrome XHTML HTML ViewUI

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

下面是打开新窗口并向其中写入内容：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>New Document </title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="夏枯草">
    <meta name="Keywords" content="">
    <meta name="Description" content="">

    <script language="JavaScript">
            function openNew()
            {
              var newwindow=window.open("imgGet.htm","","");
            var anchors = document.getElementsByTagName("img"); 
            var strImg="<ul>";
             for(i=0;i<anchors.length;i++)
            {
              strImg += "<li><a href=\"imgCut.aspx?url="+anchors[i].src+"\" target=\"_blank\"><img src=\""+anchors[i].src.substring(33)+"\" height=\"130px\" width=\"130px\" /></a></li>";
            }
             strImg+="</ul>";
            var imgDiv= newwindow.document.getElementById("imgDiv");
            imgDiv.innerHTML=strImg;
            }
    </script>

</head>
<body>
    <form method="post" action="">
    <div>
        <ul>
            <li>
                <img id="p" src="ImgFiles/01.jpg" alt="" /></li>
            <li>
                <img src="ImgFiles/02.jpg" alt="" /></li>
            <li>
                <img src="ImgFiles/03.jpg" alt="" /></li>
            <li>
                <img src="ImgFiles/04.gif" alt="" /></li>
            <li>
                <img src="ImgFiles/05.jpg" alt="" /></li>
            <li>
                <img src="ImgFiles/06.png" alt="" /></li>
            <li>
                <img src="ImgFiles/04.gif" alt="" /></li>
            <li>
                <img src="ImgFiles/05.jpg" alt="" /></li>
            <li>
                <img src="ImgFiles/06.png" alt="" /></li>
        </ul>
        <input type="button" value="编辑缩略图" name="btnchk" onclick="openNew();" style="cursor: pointer;" />
    </div>
    </form>
</body>
</html>

这样做不好的是，打开的页不恩那个够刷新，一刷新就丢失了数据。chrome不显示数据，ff没有试过。
下面真好是一个相反的过程，打开的新页中获取其父窗口的内容，刷新不会丢失数据，而且chrome显示正常：


<!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>
    <title>缩略图</title>
    <style type="text/css">
        #imgDiv
        {
            padding-bottom: 10px;
            margin: 0 auto;
            width: 960px;
            border: 1px solid #DFE0E2;
        }
        ul li
        {
            width: 136px;
            display: block;
            margin: 5px;
            float: left;
        }
    </style>

    <script language="javascript">
    function getImg()
    {
     var parent=window.opener;
     var anchors =parent.document.getElementsByTagName("img");
     var strImg="<ul>";
     for(i=0;i<anchors.length;i++)
      {
       strImg += "<li><a href=\"imgCut.aspx?url="+anchors[i].src+"\" target=\"_blank\"><img src=\""+anchors[i].src.substring(33)+"\" height=\"130px\" width=\"130px\"/></a></li>";
      }
     strImg+="</ul>";
     var imgDiv = document.getElementById("imgDiv"); 
     imgDiv.innerHTML=strImg;
    }

    </script>

</head>
<body onload="getImg();">
    <div style="width: 100%; text-align: center">
        <input type='BUTTON' value='关闭本页面' onclick='window.close()'>
    </div>
    <div id="imgDiv">
    </div>
</body>
</html>

yangsl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript打开新窗口，并向其中写入内容，打开的窗口获取父窗口中的内容。

下面是打开新窗口并向其中写入内容：[code="java"] New Document function openNew() { var newwindow=window.open("imgGet.htm","",""); ...
复制链接

扫一扫