javascript onClick() 函数将 img src= 的变量传递到另一个页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18365215/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript onClick() function pass Variable for img src= to another page
提问by Simon K Bhatta4ya
I want to pass a variable which holds an img src to another page using javascript onClick() function. How can I do it either by idor by nametag. Here's What I'm looking for:
我想使用 javascript onClick() 函数将一个包含 img src 的变量传递到另一个页面。我如何通过id或名称标签来做到这一点。这是我要找的：
Get the img srcvariable by onclick() from home.html & pass to & document.write() to img.html using a location.href = '/image';in my function()
通过 onclick() 从 home.html获取img src变量并使用location.href = '/image';我的 function() 中的a 传递到 & document.write() 到 img.html
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>
回答by cocco
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 ;)
如果你不想让我解释更多的东西就问;)
回答by Monami
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.
不知道能不能解决你的问题，希望可以。
