Open Image in New Window with Javascript 問題

Question

我有一種工作腳本可以在新的 window 中打開特定 div（稱為“note-viewer”）中的所有圖像。我無法編輯 div 來簡單地在圖像周圍放置常規錨點或添加 onclick function，div 中的圖片太小，無法正常查看。

問題是它在您第一次單擊圖像時完美運行。 如果之后單擊另一個圖像，則必須單擊它兩次才能使其生效。 一旦你嘗試第三張圖片，什么也沒有發生。 它不會引發任何類型的錯誤。 你點擊它就在那里。

我需要它是單擊任何圖像以在新的 window 中打開它。

這是代碼：

$("#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;
        });
    });

我知道; 我在不該使用的時候使用了 document.write。 “糟糕，Dev。糟糕。” 但它僅供我們部門內部使用。

更新

我只是嘗試通過嘗試使用 jQuery 將圖像標簽與錨標簽包裝起來來簡化它，如下所示：

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

那根本不起作用。

Answer 1

這是我想出的最好的工作解決方案，它是對@Jazmit 發布的內容的修改，其中包含一些 jQuery：

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 + '">');
      }
   });
}

單擊第一張圖像后，rest 出於某種原因仍需要單擊兩次，但它們都有效。 此外，它還消除了document.write 。

快速添加：事實證明它需要兩次點擊，因為 Trix 編輯器讓我（用戶）關注圖像以在第一次點擊時添加標題。 我不知道為什么它在您單擊的第一張圖片上沒有那樣的行為。

Open Image in New Window with Javascript 問題

問題描述

更新

1 個解決方案

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

Open Image in New Window with Javascript 問題

問題描述

更新

1 個解決方案

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

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