其他分享
首页 > 其他分享> > window.open打开新页面,并将本页数据用过url传递到打开的页面,详解

window.open打开新页面,并将本页数据用过url传递到打开的页面,详解

作者:互联网

页面1

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
 </head>
 <body>
 <form action="">
     <div id="name1">
         <h1>哈哈</h1>
 
         <h2>嘿嘿嘿</h2>
 
         <p>呵呵呵呵呵呵呵呵呵呵</p>
     </div>
     <input id="value1" type="text" name="user.value" />
 </form>
 <button id="btn">点击</button>
 <script src = "http://libs.useso.com/js/jquery/1.8.3/jquery.min.js"></script>
 <script>
 
     $("#btn").click(function(){
         var a = {
             name : $("#name1").html(),
             value: $("#name1").val()
         };
         var b = JSON.stringify(a)
         var url ="1_1.html?"+b;
         window.open(url, 'newwindow', 'height=700, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')
     })
 
 </script>
 </body>
 </html>

页面2

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
 </head>
 <body>
 <h1>"hello word"</h1>
 <div id="div2">
 
 </div>
 <script src="http://libs.useso.com/js/zepto/1.1.1/zepto.min.js"></script>
 <script>
     $(function(){
         var url1 = location.search;
         if (url1.indexOf("?") != -1) {
             var url = url1.substr(1);
         }
         var jsondata = decodeURI(url);
         var data = JSON.parse(jsondata);
         $("#div2")[0].innerHTML = data.name;
 
     })
 </script>
 </body>
 </html>

里面用到了,json的序列化与反序列化;JSON.parse()与JSON.stringify()

还有一种传递数据的方法是通过document.write()直接将数据写入到新打开的页面;预览就是这么做的。

 

借鉴于:https://www.bbsmax.com/A/6pdD1kklzw/

 

标签:no,url,呵呵,JSON,本页,var,打开,页面
来源: https://blog.csdn.net/u012442504/article/details/94838966