观察 Vue 中的异步外部 DOM 变化

Question

我正在使用这个组件从 Revive Adserver 注入广告：

<template>
 <div class="ins-box">
  <ins ref="insEl" :data-revive-zoneid="zoneId" data-revive-id="hash"></ins>
 </div>
</template>

<script>
export default {
  props: {
    zoneId: { type: String, default: '' }
  },
}

Revive Adserver 的外部 api 将加载区域的广告图片（在示例区域 1234 中），转换 <ins> 元素：

<ins zone-id="1234" />

它创建的<img> 标签看起来像这样：

<ins data-v-fdd5803a="" data-revive-zoneid="7859">
 <a href="http://servedby.revive-adserver.net/ck.php?params" target="_blank">
  <img src="https://www.source.com/image-555.jpg" width="468" height="60" alt="" title="" border="0">
 </a>
</ins>

我想在将创建的<img> 元素添加到 DOM 时对其进行编辑。我需要删除宽度和高度值。

在 jQuery 中我可以做类似$('ins img').load(function() {})

Vue 的方法是什么？ 该元素不是由我的 Vue 代码创建的，我也没有引用它。最重要的是，现在和他们可能会出现一个新的<img> 元素。

Answer 1

您可以使用纯 CSS 来解决这个问题，例如使用属性选择器。将图像的高度和宽度设置为auto 应该相当于删除 HTML 属性。

下面是一个示例，它将为 <a> 标记内的所有图像设置样式，其中 href 带有广告服务器域。

a[href*="revive-adserver.net"] img{
  height: auto;
  width: auto;
}

---

如果您坚持使用 JavaScript 执行此操作，请在元素的父级上使用 mutationObserver 来检测对其子级的外部 DOM 更改。给父母一个参考：

<div ref="ins-box" class="ins-box">

创建变异观察者：

mounted() {
  const observer = new MutationObserver((mutationsList, observer) => {
    const img = this.$refs['ins-box'].querySelector('img');
    img.onload = () => {
      // Now do something with `img`
    }
  });
  observer.observe(this.$refs['ins-box'], { childList: true });
}

观察父元素而不是元素本身的变化的原因是元素可能被外部服务完全替换。