Question

我想使用javascript onClick（）函数将一个包含img src的变量传递给另一个页面。我怎么能通过 id 或 name 标记来实现。这是我在寻找的东西：

从home.html＆amp;中获取onclick（）获取 img src 变量传递给＆amp;在我的函数（）

中使用location.href = '/image';将document.write（）转换为img.html

提前致谢。

功能

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

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

我希望将img src值传递给

的页面

img.html

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

Answer 1

OLD学校方式

我不确切知道，但我认为这也得到了ie6;

的支持

我只添加了必要的代码

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

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

现在给我一些时间，然后我写出现代的方式。

现代方式

..所以这个例子的支持较少但可以做的更多。我还以不同的方式写了一些类似的东西，并添加了一些特殊的现代功能，你可以在你说新的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>

如果你不想我解释一些更好的问题;）

Answer 2

有一种方法可以使这种现代方式在数据库的一个表中的所有图像上行走？我曾经尝试过，但仅在第一个图像上使用过。然后我试图将这种现代方式放入php页面。

这是我的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

使用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
     if (isset($_POST['img'])){
     $link = $_POST['img']
    }

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

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

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

3 个答案: