Javascript 在新页面中加载非特定单击的图像_Javascript_Jquery_Html_Image

Javascript 在新页面中加载非特定单击的图像

javascript jquery html image

Javascript 在新页面中加载非特定单击的图像,javascript,jquery,html,image,Javascript,Jquery,Html,Image,从我在这里的搜索和通过谷歌，我无法找到一个完整的解决方案，我正在搜索概述：我有一个页面有一个div和一些图片。这样可以很好地加载，我将其设置为在单击/点击时打开一个新页面/选项卡 <div class="wrapper"> <div class="scrollmenu"> <a href="./screenshots.html" target="_blank"> <img src="./screenshots/1.pn

从我在这里的搜索和通过谷歌，我无法找到一个完整的解决方案，我正在搜索

概述：

我有一个页面有一个div和一些图片。这样可以很好地加载，我将其设置为在单击/点击时打开一个新页面/选项卡

<div class="wrapper">
    <div class="scrollmenu">
    <a href="./screenshots.html" target="_blank">
        <img src="./screenshots/1.png" width="60%" target="_new"/>&nbsp;
    </a>
    <a href="./screenshots.html" target="_blank">
        <img src="./screenshots/2.png" width="60%" target="_new"/>&nbsp;
    </a>
    <a href="./screenshots.html" target="_blank">
        <img src="./screenshots/3.png" width="60%" target="_new"/>&nbsp;
    </a>
    </div>
</div>

问题：

虽然这甚至会打开screenshots.html，但图像不会加载

现在我知道我需要在screenshots.html文件中做一些事情来接收单击的图像，我只是不知道是什么

这是我到目前为止在该文件中设置的内容

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport">
<link rel="stylesheet" type="text/css" href="../resources/css/style.css"/>
<title>Screenshots</title>
</head>

<body class="no-pinstripe">
<panel>

  <!--This is where is needs to be loaded up -->
  <img src="./screenshots/*.png" width="60%">

</panel>
</body>
</html>


截图

我需要做什么来接收并加载点击的图像

我遇到的建议javascript。只是不知道如何把事情联系起来

<script language="JavaScript" type="text/javascript">
    if (location.search)
    {
        var image_filename = location.search.substring(1)
        document.write('<IMG SRC="' + image_filename + '">')
        //document.write('<IMG "STYLE="width:60%" SRC="' + image_filename + '">')
    }
</script>


if（location.search）
{
var image_filename=location.search.substring（1）
文件。写入（“”）
//文件。写入（“”）
}

任何帮助都将不胜感激。

像这样更改您的第一页。通过带有url的哈希标记传递img src

更新。您可以像这样修改文件夹路径

main_folder => firsthtmlpage//image call => "./screenshots/images.png" screenshots => images.png screenshot.html(secondhtmlpage)) //the image "screenshots/images.png"

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport">
    <link rel="stylesheet" type="text/css" href="../resources/css/style.css"/>
    <title>Screenshots</title>
    </head>
    <body class="no-pinstripe">
    <panel>

      <!--This is where is needs to be loaded up -->
      <img src="" width="60%">
   <script>
        window.onload=function(){
 $('img').attr('src',decodeURIComponent(window.location.hash).replace(/#|\.\//g,"").trim())
        }

      </script>
    </panel>
    </body>
    </html>

和

像这样更改screenshots.html页面

main_folder => firsthtmlpage//image call => "./screenshots/images.png" screenshots => images.png screenshot.html(secondhtmlpage)) //the image "screenshots/images.png"

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport">
    <link rel="stylesheet" type="text/css" href="../resources/css/style.css"/>
    <title>Screenshots</title>
    </head>
    <body class="no-pinstripe">
    <panel>

      <!--This is where is needs to be loaded up -->
      <img src="" width="60%">
   <script>
        window.onload=function(){
 $('img').attr('src',decodeURIComponent(window.location.hash).replace(/#|\.\//g,"").trim())
        }

      </script>
    </panel>
    </body>
    </html>


截图
window.onload=function（）{
$（'img'）.attr（'src'，decodeURIComponent（window.location.hash）.replace（//
}

你写过js吗？我个人没有，我已经添加了一个建议，我以前在修补时遇到过。修补总比不修补好（竖起大拇指）。我会试着写一个答案，尽管有人可能比我快。有人比我快：）我感谢你的帮助。正如我刚才对答案的评论，它不会打开新页面，而且打开的图像也会被破坏。虽然这对我来说可能是正确的路径，但它不会打开新页面。现在，它打开了一个破碎的图像。我不知道*.png是否是我需要的正确格式？我只是把它作为一个非特定的图像放置。@ChrisOSX请查看我的更新答案。检查该链接。然后像这样更改代码。好的，现在我们走上了正确的道路。在新页面中打开可以正常工作，但打开该页面后，不会加载任何内容。我想可能是图像链接，所以我得到了图像的完整地址。没有什么。我已经看过了您提供的答案，甚至在两页上都检查了元素。它们是相同的。有什么想法吗？@ChrisOSX将这两个html页面放在同一个文件夹中。它的不同文件夹会更改图像的路径。请按照我更新的答案进行操作。好的，我会反复检查文件夹。My index.html（主页）和screenshots.html（图像加载器）位于同一位置。在查看url时，我不确定它是否正确解码。它显示为“/screenshots.html#.%2fshreenshots%2F1.png”难道不应该是screenshots.html，然后脚本将解码的图像链接嵌入到脚本中？