Open Image in New Window with Javascript 问题

Question

I have a sort-of working script to open all images in a specific div (called "note-viewer") in a new window. The div can't be edited by me to simply place regular anchors around the images or add an onclick function, and the images are too small in the div to view properly.我有一种工作脚本可以在新的 window 中打开特定 div（称为“note-viewer”）中的所有图像。我无法编辑 div 来简单地在图像周围放置常规锚点或添加 onclick function，div 中的图片太小，无法正常查看。

The problem is that it works perfectly the first time you click an image.问题是它在您第一次单击图像时完美运行。 If you click another image after that, you have to click it twice to make it work.如果之后单击另一个图像，则必须单击它两次才能使其生效。 Once you try for a third image, nothing happens.一旦你尝试第三张图片，什么也没有发生。 It doesn't throw any kind of error.它不会引发任何类型的错误。 You click and it just sits there.你点击它就在那里。

I need it to be one click on any and every image to open it in a new window.我需要它是单击任何图像以在新的 window 中打开它。

Here's the code:这是代码：

$("#note-viewer img").click(function () {
        var imageLink = $(this).attr("src");
        $("#note-viewer img").each(function () {
            var myWindow = window.open("", "Image", "_blank", "toolbar=no,scrollbars=no,resizable=yes");
            myWindow.document.write("<head><title>Image</title></head>");
            myWindow.document.write("<img src=" + imageLink + ">");
            return myWindow;
        });
    });

I know;我知道; I'm using document.write when I shouldn't.我在不该使用的时候使用了 document.write。 "Bad, Dev. Bad." “糟糕，Dev。糟糕。” But it's only for use internally in our department.但它仅供我们部门内部使用。

UPDATE更新

I just tried simplifying it by trying to use jQuery to wrap the image tags with anchor tags as below:我只是尝试通过尝试使用 jQuery 将图像标签与锚标签包装起来来简化它，如下所示：

$(function () {
        $('#note-viewer img').wrap(function () {
            return '<a href="' + $(this).attr('src') + '"></a>';
        });
    });

That didn't work at all.那根本不起作用。

Answer 1

Here's the best working solution I've come up with which is a modification of something posted by @Jazmit with a bit of jQuery thrown in:这是我想出的最好的工作解决方案，它是对@Jazmit 发布的内容的修改，其中包含一些 jQuery：

https://stackoverflow.com/a/62285566/11420625 https://stackoverflow.com/a/62285566/11420625

const noteViewer = document.getElementById('note-viewer');
noteViewer.addEventListener('click', openLink, false);
noteViewer.addEventListener('trix-change', linkImg, false);

function findLink(el) {
   if (el.tagName == 'A' && el.href) {
      return el.href;
   } else if (el.parentElement) {
      return findLink(el.parentElement);
   } else {
      return null;
   }
}

function openLink(e) {
   const link = findLink(e.target);
   if (link == null) { return; }
   e.preventDefault();
   var base64Check = link.slice(0, 4);
   if (base64Check == 'data') {
      window.open().document.body.innerHTML = '<img src="' + link + '">';
      return;
   }
   window.open(link, '_blank');
}

function linkImg(e) {
   $("#note-viewer figure").each(function () {
      var images = this.getElementsByTagName('img');
      for (var i = 0, image = images[i]; i < images.length; i++) {
         var imageLink = $(image).attr("src");
         $(this).wrap('<a href="' + imageLink + '">');
      }
   });
}

After the first image is clicked, the rest still require two clicks for some reason, but they all work.单击第一张图像后，rest 出于某种原因仍需要单击两次，但它们都有效。 Also, it eliminates the document.write .此外，它还消除了document.write 。

QUICK ADDITION: Turns out that it requires two clicks because the Trix Editor is focusing me (the user) on the image to add a caption on the first click.快速添加：事实证明它需要两次点击，因为 Trix 编辑器让我（用户）关注图像以在第一次点击时添加标题。 I have no idea why it doesn't behave that way on the very first image you click.我不知道为什么它在您单击的第一张图片上没有那样的行为。

Open Image in New Window with Javascript 问题

问题描述

UPDATE更新

1 个解决方案

解决方案1
0 2023-01-27 23:23:48

Open Image in New Window with Javascript 问题

问题描述

UPDATE更新

1 个解决方案

解决方案1 0 2023-01-27 23:23:48

解决方案1
0 2023-01-27 23:23:48