两个页面之间通过js进行传值

最新推荐文章于 2023-04-14 09:40:24 发布

天崩地裂金刚不坏

最新推荐文章于 2023-04-14 09:40:24 发布

阅读量1.1w

点赞数 1

本文链接：https://blog.csdn.net/baidu_31333625/article/details/53173729

版权

第一个页面中有两个图片，当点击的时候能在第二个页面中获得它的属性值（）通过js进行传值：第一个页面：[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/...

第一个页面中有两个图片，当点击的时候能在第二个页面中获得它的属性值（）通过js进行传值：
第一个页面：

[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>无标题文档</title>
<script type="text/javascript">
function test(){

var img1= document.getElementById("img1");
var img2= document.getElementById("img2");
//获得alt的属性
var parm1=img1.getAttribute("alt");
var parm2=img2.getAttribute("alt");
//url

img1.οnclick=function(){
var myurl="test2.html"+"?"+"parm1="+parm1;
window.location.assign(myurl);
}

img2.οnclick=function(){
var myurl="test2.html"+"?"+"parm2="+parm2;
window.location.assign(myurl);
}

}
</script>
</head>

<body οnlοad="test();">
<img src="1.jpg" id="img1" alt="myimg1">
<img src="2.jpg" id="img2" alt="myimg2">

</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>无标题文档</title>
<script type="text/javascript">
function test(){

var img1= document.getElementById("img1");
var img2= document.getElementById("img2");
//获得alt的属性
var parm1=img1.getAttribute("alt");
var parm2=img2.getAttribute("alt");
//url

img1.οnclick=function(){
var myurl="test2.html"+"?"+"parm1="+parm1;
window.location.assign(myurl);
}

img2.οnclick=function(){
var myurl="test2.html"+"?"+"parm2="+parm2;
window.location.assign(myurl);
}

}
</script>
</head>

</body>

</html>

第二个页面：
[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>test2</title>

<script type="text/javascript">
function getvalue()
{

///test2.html?parm1=myimg1&parm2=myimg2
//获得第一个属性
var url=location.href;
var tmp1=url.split("?")[1];
var tmp2=tmp1.split("&")[0];
var tmp3=tmp2.split("=")[1];
var parm1=tmp3;
//获得第二个属性
/*
var tmp9=url.split("?")[1];
var tmp4=tmp9.split("&")[1];
var tmp5=tmp4.split("=")[1];
var parm2=tmp5;
*/
var inhtml= document.getElementById("inhtml");
inhtml.innerHTML=parm1;
//alert(parm1);
}
</script>

</head>

<body οnlοad="getvalue();">

<h2>测试</h2>
<span id="inhtml"> </span>

</body>
</html>

///test2.html?parm1=myimg1&parm2=myimg2
//获得第一个属性
var url=location.href;
var tmp1=url.split("?")[1];
var tmp2=tmp1.split("&")[0];
var tmp3=tmp2.split("=")[1];
var parm1=tmp3;
//获得第二个属性
/*
var tmp9=url.split("?")[1];
var tmp4=tmp9.split("&")[1];
var tmp5=tmp4.split("=")[1];
var parm2=tmp5;
*/
var inhtml= document.getElementById("inhtml");
inhtml.innerHTML=parm1;
//alert(parm1);
}
</script>

</head>

</body>
</html>

<..............................................................................................................................>

 
   < 
   script 
   > 
  

 
   function dd(x){ 
  

 
   var y="b.aspx?id="+x 
  

 
   location.href=y;//打开b.asp?id=参数x 
  

}

 
   </ 
   script 
   > 
  

 
   < 
   div  
   onclick 
   = 
   "dd('abc');" 
   >点击</ 
   div 
   > 
  

<..............................................................................................................................>

通过url传参

如果是HTML页面的话JS传到新页面就window.location.href='a.html?id=100';然后a.html页面的JS就<div id="s"></div>

 
          <script> 
         
          document.getElementById( 
          "s" 
          ).innerHTML=window.location.split( 
          '?' 
          )[1]; 
         
          </script>

如果是想要实现AJAX在a页面传参数到b页面并且在a页面的层显示b页面执行参数的结果的话就用AJAX了

这个写起来太多，给你JQUERY的

 
          <div id= 
          "a" 
          ></div> 
         
 
          $( 
          "#a" 
          ).load( 
          "b.html?id=100" 
          ); 
         
 
          //或者 
         
 
          $.get( 
          "b.html?id=100" 
          , 
          function 
          (data){ 
         
 
          $( 
          "#a" 
          ).html(data); 
         
 
          }) 
         