为某个div下img标签添加点击事件,可在新页面打开base64类型图片

export const addImgClickEvent = (id) => {
  var objs = document.getElementById(`${id}`)?.getElementsByTagName('img');
  for (var i = 0; i < objs?.length; i++) {
    objs[i].onclick = function () {
      // iFrameOpenImg(this.src);
      let str = '<!DOCTYPE html><html><body><div><img src=' + this.src + ' /></div></body></html>';
      let newOpen = window.open(
        '',
        '_blank'
        // 'scrollbars=1,resizable=1,width=1000,height=580,left=0, top=0'
      );
      // newOpen.document.write(this.outerHTML);
      newOpen.document.write(str);
      newOpen.document.close();
    };
    objs[i].style.cursor = 'pointer';
  }
};

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,根据您的问题描述,我理解您需要用 Ajax 调用存储在服务器端的图片,并将其展示在页面上的某个 div 元素中。同时,当页面时,需要确保图片也能够随之刷。下面是一个参考的代码示例,供您参考: HTML 代码: ```html <div id="image-container"></div> ``` JavaScript 代码: ```javascript // 定义用于调用 Ajax 的函数 function callAjax(url, callback) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { callback(xhr.responseText); } }; xhr.open("GET", url, true); xhr.send(); } // 定义用于刷图片的函数 function refreshImage() { var imageContainer = document.getElementById("image-container"); // 在调用 Ajax 前,先移除原有的图片 while (imageContainer.firstChild) { imageContainer.removeChild(imageContainer.firstChild); } // 调用 Ajax 加载图片 callAjax("image.php", function(response) { var img = document.createElement("img"); img.setAttribute("src", response); imageContainer.appendChild(img); }); } // 页面加载完成后,调用刷图片的函数 window.onload = refreshImage; // 监听页面事件,当页面时,再次调用刷图片的函数 window.addEventListener("beforeunload", function() { refreshImage(); }); ``` 在上面的代码示例中,我们定义了两个函数:`callAjax` 和 `refreshImage`。`callAjax` 函数用于调用 Ajax,从服务器端加载图片的 URL。`refreshImage` 函数则用于刷图片。在 `refreshImage` 函数中,我们先移除原有的图片元素,然后再调用 `callAjax` 函数加载图片,并将其添加页面上的 `image-container` 元素中。在页面加载完成后,我们调用 `refreshImage` 函数,以确保第一次加载图片。同时,我们还监听了页面事件,并在事件发生时再次调用 `refreshImage` 函数,以确保图片能够随之刷。 需要注意的是,上面的代码示例中,我们假设服务器端的图片 URL 返回的是一个字符串格式的图片数据,因此我们直接将其设置给 `img` 元素的 `src` 属性。如果您的服务器端返回的是一个图片文件,您需要将其转换为 Base64 编码的字符串,或者通过其他方式将其加载到页面上。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值