注意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代码创建的，我没有对它的引用。最重要的是，现在可能会有一个新的<img>元素和它们。

Answer 1

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

这里有一个示例，将样式的所有图像在<a>标签有一个href与广告服务器域。

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

---

如果您坚持使用JavaScript这样做，请在元素的父元素上使用mutationObserver来检测其子元素的外部DOM更改。给父元素一个ref:

<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 });
}

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