单击第一个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)

提问人:pooria1998 提问时间:9/21/2023 最后编辑:pooria1998 更新时间:9/22/2023 访问量:43

问:

我正在制作一个艺术作品集网站,其中我的图片库的内容是用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">`;
});

javascript html ajax dom 图片库

评论

0赞 mykaf 9/21/2023
请附上一个最小的可重现示例,说明您如何尝试实现 onclick 事件。在这一点上,我们没有什么可批评的,没有任何代码可以检查。
0赞 Community 9/22/2023
请提供足够的代码,以便其他人可以更好地理解或重现问题。

答:

0赞 Nosajimiki 9/21/2023 #1

使用参数化 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>