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

Question

I want to pass a variable which holds an img src to another page using javascript onClick() function.我想使用 javascript onClick() 函数将一个包含 img src 的变量传递到另一个页面。 How can I do it either by id or by name tag.我如何通过id或名称标签来做到这一点。 Here's What I'm looking for:这是我要找的：

Get the img src variable by onclick() from home.html & pass to & document.write() to img.html using a location.href = '/image';通过 onclick() 从 home.html 获取img src变量 & 使用location.href = '/image';传递到 & document.write() 到 img.html location.href = '/image'; in my function()在我的函数（）中

Thanks in advance.提前致谢。

function功能

<script type="text/javascript">
function img(id)
{
    this.id = id;
    var i = document.getElementById("image").src;
    var j = new Image();
    j.src = i;
    document.body.appendChild(j);
    document.write('"<img src="' + j + '"' + '/>');
}

</script>

home.html主页.html

<div class="container">

    <ul class="thumbnails">
    <li class="span3">
    <img src="../img/google-app-engine.gif" class="thumbnail" id="abc" name="a">
    <img data-src="holder.js/300x200" alt="">
<button class="btn btn-inverse" type="button" onclick="img();">Share</button>
    </li>
    <li class="span3">
    <img src="../img/google-app-engine.gif" class="thumbnail" id="xyz" name="b">
    <img data-src="holder.js/300x200" alt="">
<button class="btn btn-inverse" type="button" onclick="img();">Share</button>
    </li>
    <li class="span3">
    <img src="../img/google-app-engine.gif" class="thumbnail" id="zzz" name="c">
    <img data-src="holder.js/300x200" alt="">
<button class="btn btn-inverse" type="button" onclick="img();">Share</button>
    </li>
    </ul>

</div>

The Page I want to pass the img src value to is我想将 img src 值传递给的页面是

img.html img.html

<div class="container">
    <div id="image" name="image">
    <img src="" id="image" name="image"/>
    </div>
</div>

Answer 1

OLD school way老学校方式

i don't know exactly but i think this is also supported by the ie6;我不知道确切，但我认为 ie6 也支持这一点；

i only added the necessary code我只添加了必要的代码

home.html主页.html

<html>
<head>
<title>thumbs</title>
<script>
function sendimg(a){
 window.location.href='b.html#id='+a.id+'&src='+a.src;
}
</script>
</head>
<body>
<img src="imgs/img1.jpg" id="img1" onClick="sendimg(this);">
<img src="imgs/img2.jpg" id="img2" onClick="sendimg(this);">
<img src="imgs/img3.jpg" id="img3" onClick="sendimg(this);">
</body>
</html>

img.html img.html

<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>

now give me some seconds and i write the modern way.现在给我几秒钟，我写现代的方式。

Modern way现代方式

.. so this example has less support but can do alot more. .. 所以这个例子支持较少，但可以做的更多。 i also wrote some similar things in a different way and added some special modern features you can look after as you said your new to javascript.我还用不同的方式写了一些类似的东西，并添加了一些特殊的现代功能，你可以在你说你不熟悉 JavaScript 时照顾它。

home.html主页.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 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>

if you wan't me to explain something morejust ask ;)如果你不想让我解释更多的东西就问;)

Answer 2

there can be a way to make this Morden way to walk on all images which are in one table of the database?i used to try that but it's used only on the first image.then i tried to put that morden way in php pages.有没有办法让这种现代方式在数据库的一个表中的所有图像上行走？我曾经尝试过，但它只用于第一个图像。然后我尝试将这种现代方式放在 php 页面中。

here's my php pages:这是我的 php 页面：

 *home.php: <?php $bdd = new PDO('mysql:host=127.0.0.1;dbname=imagetest', 'root', ''); ?> <html> <head> <title>thumbs</title> </head> <body> <div > <?php $req = $bdd->query("SELECT * FROM images ORDER BY idimage DESC "); while ($donnees = $req->fetch()): ?> <div id="thumbs"><?php echo ('<img style="width:180px;height:180px;margin-left:40%;" src = "'.$donnees['lien'].'">');?> </div> <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.php"; } } W.addEventListener('load',init,false) })(window) </script> <?php endwhile; ?> </div> <body> </body> </html> *img.php <!DOCTYPE html> <html> <head> <title>img</title> <meta charset="utf-8"/> <meta name="viewport" content="width-device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" type="text/css" href="./style.css"/> <link rel="stylesheet" type="text/css" href="https//fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/> <style type="text/css"> img{height: 300px;width: 400px;} </style> <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>

Answer 3

This would easily be done with Ajax + PHP + jQuery这很容易用 Ajax + PHP + jQuery 完成

JQUERY查询

var link = $("img").attr("src");

    $.ajax{
       url: "img.php",
       type: "POST",
       data: {"img":link},
       success: function(e){
        // Whatever you want
       }
    }

PHP PHP

       <?php
     if (isset($_POST['img'])){
     $link = $_POST['img']
    }

   // Whatever you want to do with the variable $link
    ?>

I don't know if this is going to solve your problem, hope it does.不知道能不能解决你的问题，希望可以。

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

问题描述

3 个解决方案

解决方案1
5 已采纳 2013-08-21 19:20:45

解决方案2
0 2020-06-18 12:52:55

解决方案3
-5 2013-08-21 18:45:46

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

问题描述

3 个解决方案

解决方案1 5 已采纳 2013-08-21 19:20:45

解决方案2 0 2020-06-18 12:52:55

解决方案3 -5 2013-08-21 18:45:46

解决方案1
5 已采纳 2013-08-21 19:20:45

解决方案2
0 2020-06-18 12:52:55

解决方案3
-5 2013-08-21 18:45:46