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

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

LvesLi

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

阅读量4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html5

本文链接：https://blog.youkuaiyun.com/wildcatlele/article/details/8938573

html5 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用JavaScript在不同网页间传递图片属性的方法。具体实现为：通过获取图片的alt属性，并将其作为URL参数传递到另一个页面，然后在该页面解析URL参数并显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

第一个页面：

<!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.onclick=function(){
			var myurl="test2.html"+"?"+"parm1="+parm1;
			window.location.assign(myurl); 
			}
			
		   img2.onclick=function(){
			var myurl="test2.html"+"?"+"parm2="+parm2;
			window.location.assign(myurl); 
			}	
			
			
		}
</script>
</head>

<body onload="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>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 onload="getvalue();">

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

</body>
</html>