Fatal编程技术网
  • javascript/
  • javascript onClick（）函数将img src=的变量传递到另一个页面

javascript onClick（）函数将img src=的变量传递到另一个页面

javascript

javascript onClick（）函数将img src=的变量传递到另一个页面,javascript,onclick,Javascript,Onclick,我想使用javascript onClick函数将一个保存img src的变量传递给另一个页面。我如何通过id或名称标签来实现这一点。 以下是我想要的： 通过onclick from home.html获取img src变量，并使用location.href='/image'传递到&document.write到img.html；在我的职责范围内 提前谢谢 作用 home.html <html> <head> <title>thumbs</title&g

我想使用javascript onClick函数将一个保存img src的变量传递给另一个页面。我如何通过id或名称标签来实现这一点。 以下是我想要的：

通过onclick from home.html获取img src变量，并使用location.href='/image'传递到&document.write到img.html；在我的职责范围内

提前谢谢

作用

home.html

<html>
<head>
<title>thumbs</title>
<script>
(function(W){
 function init(){
  W.document.getElementById('thumbs').addEventListener('click',sendimg,false);
 }
 function sendimg(e){
  var a=e.target;
  if(a.parentNode.id=='thumbs'){
   W.localStorage['imginfo']=JSON.stringify({src:a.src,id:a.id});
   W.location.href="img.html";
  }
 }
 W.addEventListener('load',init,false)
})(window)
</script>
</head>
<body>
<div id="thumbs">
<img src="imgs/img1.jpg" id="img1">
<img src="imgs/img2.jpg" id="img2">
<img src="imgs/img3.jpg" id="img3">
</div>
</body>
</html>
我想要传递img src值的页面是

img.html

<html>
<head>
<title>img</title>
<script>
window.onload=function(){
 var img=document.createElement('img');
 var info=JSON.parse(window.localStorage['imginfo']);
 delete window.localStorage['imginfo'];
 img.src=info.src;
 img.id=info.id;
 document.body.appendChild(img);
}
</script>
</head>
<body>
</body>
</html>
这可以通过Ajax+PHP+jQuery轻松实现

JQUERY

PHP

我不知道这是否能解决你的问题，希望能解决。

老办法

我不知道具体情况，但我认为ie6也支持这一点

我只添加了必要的代码

home.html

<html>
<head>
<title>thumbs</title>
<script>
(function(W){
 function init(){
  W.document.getElementById('thumbs').addEventListener('click',sendimg,false);
 }
 function sendimg(e){
  var a=e.target;
  if(a.parentNode.id=='thumbs'){
   W.localStorage['imginfo']=JSON.stringify({src:a.src,id:a.id});
   W.location.href="img.html";
  }
 }
 W.addEventListener('load',init,false)
})(window)
</script>
</head>
<body>
<div id="thumbs">
<img src="imgs/img1.jpg" id="img1">
<img src="imgs/img2.jpg" id="img2">
<img src="imgs/img3.jpg" id="img3">
</div>
</body>
</html>
img.html

<html>
<head>
<title>img</title>
<script>
window.onload=function(){
 var img=document.createElement('img');
 var info=JSON.parse(window.localStorage['imginfo']);
 delete window.localStorage['imginfo'];
 img.src=info.src;
 img.id=info.id;
 document.body.appendChild(img);
}
</script>
</head>
<body>
</body>
</html>
现在给我几秒钟，我用现代的方式写

现代方式

。。所以这个例子支持较少，但可以做更多。 我还以不同的方式编写了一些类似的东西，并添加了一些特殊的现代功能，您可以在使用javascript时关注这些功能

home.html

<html>
<head>
<title>thumbs</title>
<script>
(function(W){
 function init(){
  W.document.getElementById('thumbs').addEventListener('click',sendimg,false);
 }
 function sendimg(e){
  var a=e.target;
  if(a.parentNode.id=='thumbs'){
   W.localStorage['imginfo']=JSON.stringify({src:a.src,id:a.id});
   W.location.href="img.html";
  }
 }
 W.addEventListener('load',init,false)
})(window)
</script>
</head>
<body>
<div id="thumbs">
<img src="imgs/img1.jpg" id="img1">
<img src="imgs/img2.jpg" id="img2">
<img src="imgs/img3.jpg" id="img3">
</div>
</body>
</html>
img.html

<html>
<head>
<title>img</title>
<script>
window.onload=function(){
 var img=document.createElement('img');
 var info=JSON.parse(window.localStorage['imginfo']);
 delete window.localStorage['imginfo'];
 img.src=info.src;
 img.id=info.id;
 document.body.appendChild(img);
}
</script>
</head>
<body>
</body>
</html>
如果你不想我再解释些什么，就问吧

有一种方法可以使这种现代的方式在数据库的一个表中的所有图像上漫游吗？我曾经尝试过，但它只在第一个图像上使用。然后我尝试在php页面中使用这种现代的方式

以下是我的php页面：

*home.php： 拇指 函数w{ 函数初始化{ W.document.getElementById'thumbs'。addEventListener'click'，sendimg，false； } 函数sendimge{ var a=e.目标； ifa.parentNode.id=='thumbs'{ W.localStorage['imginfo']=JSON.stringify{src:a.src，id:a.id}； W.location.href=img.php； } } W.addEventListener'load'，init，false }窗口 *img.php img img{高度：300px；宽度：400px；} window.onload=函数{ var img=document.createElement'img'； var info=JSON.parsewindow.localStorage['imginfo']； 删除window.localStorage['imginfo']； img.src=info.src； img.id=info.id； document.body.appendChildimg； }
使用隐藏的输入字段？不能有重复的id。你不能有一个以数字开头的id。你在这里想做什么？您想用单击的图像打开img.html，还是只是将其发送到html页面，并打算将响应用于某些事情？为什么要使用该文档。在那里编写？您已经在将图像添加到主体中。然后从基础开始，阅读MDN Mozilla Developer Network introduction to JS教程它是免费的！或雄辩的JavaScript另一本免费书！也有免费的教程。您的评论表明您缺乏实际解决手头问题的基本理解。用这种方式编码是痛苦的，没有回报的-JS是一种很棒的语言，你可以享受它-不要把自己放在这个位置上。如果OP所指的页面是一个没有加载AJAX的新页面怎么办？OP没有提到任何服务器端代码。他也在使用原始html文件，而不是php。嗨，谢谢你的代码，它们都很好用，我怎样才能将img加载到img.html页面上所需的容器中呢。。。他们有相同的身份证，这是错误的。div应该具有id=imgContainer，并且应该删除图像。。然后使用document.getElementById'imgContainer'.appendChildimg，这是第二个代码。 
<html>
<head>
<title>img</title>
<script>
function getimg(){
 var a=window.location.href.split('#')[1].split('&'),
 id=a[0].split('=')[1],
 src=a[1].split('=')[1],
 img=document.images[0];
 img.id=id;
 img.src=src;
}
</script>
</head>
<body onLoad="getimg()">
<img src="ablankimage.gif">
</body>
</html>

<html>
<head>
<title>thumbs</title>
<script>
(function(W){
 function init(){
  W.document.getElementById('thumbs').addEventListener('click',sendimg,false);
 }
 function sendimg(e){
  var a=e.target;
  if(a.parentNode.id=='thumbs'){
   W.localStorage['imginfo']=JSON.stringify({src:a.src,id:a.id});
   W.location.href="img.html";
  }
 }
 W.addEventListener('load',init,false)
})(window)
</script>
</head>
<body>
<div id="thumbs">
<img src="imgs/img1.jpg" id="img1">
<img src="imgs/img2.jpg" id="img2">
<img src="imgs/img3.jpg" id="img3">
</div>
</body>
</html>

<html>
<head>
<title>img</title>
<script>
window.onload=function(){
 var img=document.createElement('img');
 var info=JSON.parse(window.localStorage['imginfo']);
 delete window.localStorage['imginfo'];
 img.src=info.src;
 img.id=info.id;
 document.body.appendChild(img);
}
</script>
</head>
<body>
</body>
</html>