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

在＆＃34;宽度＆＃34;之前的第一个引号"。关闭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>

Answer 2

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

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>

打开包含嵌入图像的新窗口

2 个答案: