提问人:pooria1998 提问时间:9/21/2023 最后编辑:pooria1998 更新时间:9/22/2023 访问量:43
单击第一个html文档中的链接时,如何更改为第二个html文档的内容?(类似于ArtStation网站)
How to change to content of second html document when clicking on a link in the first html document? (similar to artstation website)
问:
我正在制作一个艺术作品集网站,其中我的图片库的内容是用JS(JSON文件)动态添加的,因为有很多图像需要通过html标签手动添加。
当我单击每个缩略图图像时,我希望它打开另一个 html 页面,该页面显示原始全屏图像以及与该特定图像相关的一些额外信息。
为每张图片制作数百个唯一的 html 是不合逻辑的。所以我有一个“画廊.html”,我只需要另一个名为“artwork.html”的html,它的内容会根据我在“画廊.html”中点击的图像而变化(就像artstation的工作方式一样)。
我能做些什么?它甚至应该像我上面提到的那样完成吗?我应该改变我的方法吗?任何建议将不胜感激。
我尝试了 onclick 事件,但是当我单击第一个 html 中的图像时,无法使用 JS 操作第二个 html 的元素。 我知道它可以在同一个 html 文档中使用类似模态的东西来实现,但我想知道它是如何在打开另一个 html 页面的 artstation 中完成的。 我认为 artstation 使用 ajax,但我是初学者,我有点迷茫,所以我不太知道如何正确地使用 ajax 做到这一点。
这是我所做的事情的一个简化示例。
第一个 HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>gallety</title>
<style>
img {
width: 200px;
display: block;
margin: 3rem auto;
}
</style>
</head>
<body>
<a href="index2.html" class="img-link">
<img src="image_thumbnail.jpg">
</a>
</body>
</html>
第二个 HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>gallety</title>
</head>
<body>
<div class="img-container">
</div>
</body>
</html>
JavaScript的:
const imgLink = document.querySelector('.img-link');
const imgContainer = document.querySelector('.img-container');
// approach 1: clicking the link to add content to div in second html (not working)
imgLink.addEventListener('click', function () {
imgContainer.innerHTML = `<div>image information</div><img src="image.jpg">`;
});
// approach 2: trying to open the second html and then adding the content (not working)
imgLink.addEventListener('click', function (e) {
e.preventDefault();
window.open('index2.html',self);
imgContainer.innerHTML = `<div>image information</div><img src="image.jpg">`;
});
答:
使用参数化 URL
让链接转到类似 https://mywebsite.com/artwork.html?img=1732
URL 中的“?”结束文件位置,并开始解释为传递的变量。因此,在这种情况下,文件“artwork.html”将加载,并且可以使用值为“1732”的变量“img”。通常,这种行为是由服务器端语言(如 PHP)处理的,用于在传递请求之前在服务器上编译请求,但如果您不了解任何服务器端语言,则可以使用 JavaScript 读取参数,如下所示:
<script>
var urlStr = window.location.href;
var url = new URL(urlStr);
var imgID = url.searchParams.get("img");
var imgUrl = "https://mywebsite.com/artfolder/" + imgID + ".jpg";
</script>
评论