打开带有嵌入图像的新窗口

Question

我正在尝试打开一个新窗口，当在原始页面上单击图像时，该窗口会显示所单击嵌入图像的放大版本。这可能吗？

我已经尝试过类似以下的方法（我现在没有实际的代码，但希望您能看到我正在尝试做的事情），但是打开的窗口没有图像，只是一个空白页。

嵌入的图像数据也只是一个示例。大图和小图在实际情况下实际上是不同的。

<a href="data:image/png;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNg YPj/gAwXEQA7">
<img onclick="var largeImgSrc=parentNode.href;
window.open(largeImgSrc,"width=400,height=300");
return false;" src="data:image/png;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"></img>
</a>

所以，我将较大的图像源存储在锚点的 href 属性中。单击图像时，应发送onclick 事件并执行javascript，打开一个包含图像的新窗口。

由于它打开了窗口但没有显示任何内容，我认为使用数据源 uri 而不是指向实际图像的链接有问题。

Answer 1

在您的代码中，您有以下内容：

onclick="var largeImgSrc=parentNode.href; window.open(largeImgSrc,".....

您在调用window.open(largeImgSrc," <- this one 时的双引号将关闭由onclick=" <- this one 开始的双引号，基本上使JS 代码的其余部分不完整。

您的窗口打开了，但函数格式不正确，所以事情很快就失败了（您甚至可能因此遇到控制台错误 - 如果您还没有，我会感到惊讶）。

当所有内容都像您在示例代码中所做的那样内联时，这种情况很难检测到。

因此，为了可读性，我将 JS 分解为一个单独的函数，将 onclick 添加到 href 而不是图像

注意：下面的代码是沙盒的，不会打开新窗口。您需要在自己的页面/代码上尝试此操作

function openImg() {
  var largeImgSrc = "data:image/png;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"

  window.open(largeImgSrc, "title here", "width=400, height=300");
  return false;

}

<a href="#" onclick="openImg()">
  <img src="data:image/png;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNg YPj/gAwXEQA7" />
</a>

Answer 2

单词“width”之前的第一个引号" 关闭了onclick 属性，从而破坏了您的功能。您可以清理它或创建一个函数以通用方式处理这些问题。

<a href = "data:image/png;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNg YPj/gAwXEQA7">
<img onclick="fruitloop(this)" src = "data:image/png;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"></img>
</a>
<script>
    function fruitloop(that){
        var largeImgSrc = that.parentNode.href;
        console.log(largeImgSrc)
        window.open(largeImgSrc,"width = 400, height = 300");
        return false;

    }
</script>