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

勇闯天亚

于 2019-07-06 10:59:59 发布

阅读量2.6k

点赞数 1

分类专栏：前端 HBuilder 文章标签： window.open window 网页 js 页面传参

前端同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

HBuilder

15 篇文章 0 订阅

订阅专栏

页面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/

勇闯天亚

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
window.open打开新页面，并将本页数据用过url传递到打开的页面，详解

页面1 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form action=""> ...
复制链接

扫一扫