页面间的传值

1.URl传值

 直接上代码

例1:

a.html

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>New Document</title>  
  
    <script>  
      function   to(){  
        var  getval =document.getElementById("cc").value;  
        window.location.href="b.html?cc="+getval;  
      }  
    </script>  
</head>  
<body>  
<input type="text" id ="cc" >  
 <input type="button"  value="a"  onclick="to()" >  
</body>  
</html>  

  b.html

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
  
    <script>  
  var thisURL = document.URL;  
  var  getval =thisURL.split('?')[1];  
  var showval= getval.split("=")[1];  
  function  showvalf(){  
     alert(showval);  
     document.getElementById('ee').value=showval;  
  }  
</script>  
</head>  
<body onload="showvalf()">  
<input type="text"  id ="ee" />  
</body>  
</html>  

 例2:

    a.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	<title>将弹出式窗口的资料输入到主窗口中</title>  
	<script language="javascript">  
	function openUrl(){  
	    window.open("b.html","","width=300,height=200");  
	}  
	</script>  
	</head>  
	<body>  
	接受弹出式窗口的资料  
	<div onclick="openUrl()"  id="txt"> htllo </div>
	</body>  
</html>  

  b.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>将弹出式窗口的资料输入到主窗口中</title>  
	<script language="javascript">   
	    function out(){  
	        opener.txt.innerHTML = 'txt.value';  
	    }  
	    window.onunload = function(){  
	        opener.txt.value = '子窗口已经关闭了!';   
	    }  
 
	</script>  
	</head>  
	<body>  
	<input id="txt" type="text">  
	<input type="button" value="输出" onClick="out()">  
	<button onclick="out()"> 提交 </button>
	</body>  
	 
</html>

2.localStorage传值

  a.html

    通过监听strong事件获取新值(不然需刷新页面才可获取新值)

<!DOCTYPE html>
<html>
<head lang="en">
    <title>A</title>
</head>
<body>
<script>
    window.addEventListener("storage", function (e) {
        alert(e.newValue);
    });
</script>
</body>
</html>

posted @ 2017-04-24 10:53  sunZL  阅读(194)  评论(0)    收藏  举报