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

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>

因此，我将较大的图像源存储在 anchor 的 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>