Javascript：如何将 Javascript 图像链接到页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17049455/
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: How do I make a Javascript image link to a page?
提问by Guy Keogh
I am very new to Javascript, I am making a HTML website.
我对 Javascript 很陌生，我正在制作一个 HTML 网站。
Since I am new to Javascript, I do not know how to show an image, and when the image is clicked make it link to a page.
由于我是 Javascript 的新手，我不知道如何显示图像，并且在单击图像时将其链接到页面。
I know how to do it in HTML, but due to my free host if I wasn't to make a single change to how many images there are (which I will do a lot), or where it links to (which will be shown on every page) I will need to go through every page.
我知道如何在 HTML 中执行此操作，但是由于我的免费主机，如果我不对有多少图像（我会做很多）或链接到的位置（将显示）进行一次更改在每一页上）我需要浏览每一页。
All I need it to do is open the page on the same tab.
我需要做的就是在同一个选项卡上打开页面。
回答by Marc Marta
Try this:
试试这个：
var img = new Image();
img.src = 'image.png';
img.onclick = function() {
window.location.href = 'http://putyourlocationhere/';
};
document.body.appendChild(img);
回答by David says reinstate Monica
Without more information, I'm going to offer this as a relatively cross-browser approach, which will append an imgelement wrapped in an aelement. This works with the following (simple) HTML:
没有更多信息，我将提供它作为一种相对跨浏览器的方法，它将附加一个img元素包裹在一个a元素中。这适用于以下（简单）HTML：
<form action="#" method="post">
<label for="imgURL">image URL:</label>
<input type="url" id="imgURL" />
<label for="pageURL">page URL:</label>
<input type="url" id="pageURL" />
<button id="imgAdd">add image</button>
</form>
And the following JavaScript:
以及以下 JavaScript：
// a simple check to *try* and ensure valid URIs are used:
function protocolCheck(link) {
var proto = ['http:', 'https:'];
for (var i = 0, len = proto.length; i < len; i++) {
// if the link begins with a valid protocol, return the link
if (link.indexOf(proto[i]) === 0) {
return link;
}
}
// otherwise assume it doesn't, prepend a valid protocol, and return that:
return document.location.protocol + '//' + link;
}
function createImage(e) {
// stop the default event from happening:
e.preventDefault();
var parent = this.parentNode;
/* checking the protocol (calling the previous function),
of the URIs provided in the text input elements: */
src = protocolCheck(document.getElementById('imgURL').value);
href = protocolCheck(document.getElementById('pageURL').value);
// creating an 'img' element, and an 'a' element
var img = document.createElement('img'),
a = document.createElement('a');
// setting the src attribute to the (hopefully) valid URI from above
img.src = src;
// setting the href attribute to the (hopefully) valid URI from above
a.href = href;
// appending the 'img' to the 'a'
a.appendChild(img);
// inserting the 'a' element *after* the 'form' element
parent.parentNode.insertBefore(a, parent.nextSibling);
}
var addButton = document.getElementById('imgAdd');
addButton.onclick = createImage;
