mutation-observers 相关问题

考虑以下代码： var MutationObserver = window.MutationObserver || window.WebKitMutationObserver ||窗口.MozMutationObserver; var 观察者 = new MutationObserver(function(mut...

javascript mutation-observers

回答 4 投票 0

如何确保 MutationObserver 在 iframe 发生预期更改之前注册，以便能够检测到它们？这可能吗？

我希望能够观察 iframe 中的突变（来自父文档），以便当某个元素加载到其中时，我可以采取进一步的操作。我还没能得到 MutationObse...

javascript iframe mutation-observers

回答 1 投票 0

如何在页面加载时更改 HTML 内容

我在我们的网站上进行 A/B 测试，我的大部分工作都在一个 JS 文件中，该文件在渲染其他任何内容之前加载在页面顶部，但在 jQuery 加载之后，这有时会派上用场。 ..

javascript ab-testing mutation-observers mutation-events optimizely

回答 2 投票 0

观察/观察 Vue 中 DOM 子级的数量

给定一个具有槽使用的典型 Vue 组件：导出默认值{ 名称：“VueComponent&</desc> <question vote="4"> <p>给出具有 <pre><code>slot</code></pre> 用法的典型 Vue 组件：</p> <pre><code><template> <div> <slot></slot> </div> </template> <script> export default { name: "VueComponent" } </script> </code></pre> <p>有没有可能的方法来实现一个观察者/观察者来跟踪 <pre><code>slot</code></pre> 中 DOM 子级的数量？我需要知道何时在组件内添加/删除子项。</p> </question> <answer tick="true" vote="5"> <p>所以我发现对我的问题有用的是<a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" rel="nofollow noreferrer"><pre><code>MutationObserver</code></pre></a>。我们需要在组件安装后将观察者附加到组件上，添加回调处理程序并在组件销毁之前断开观察者的连接（在 Vue3 中卸载）。</p> <p>这是一个用 Vue 2.6 编写的工作示例</p> <pre><code><template> <div ref="container"> <slot></slot> </div> </template> <script> export default { name: "VueComponent", data() { return { observer: null } }, mounted() { this.initObserver() }, beforeDestroy() { if (this.observer) this.observer.disconnect() }, methods() { handleChildrenChanged() { }, initObserver() { config = { subtree: false, childList: true, // it's better if you can detect children change by id // this can reduce number of updates // attributes: true, // attributeList: [ 'id' ] } const self = this const callback = () => { self.$nextTick(() => { self.handleChildrenChanged() }) } const observer = new MutationObserver(callback) observer.observe(this.$refs.container, config) this.observer = observer } } } </script> </code></pre> <p>您可以在 Vue 中找到 <pre><code>MutationObserver</code></pre> 的另一种用法：<a href="https://dev.to/sammm/using-mutationobserver-and-resizeobserver-to-measure-a-changing-dom-element-in-vue-3jpd" rel="nofollow noreferrer">https://dev.to/sammm/using-mutationobserver-and-resizeobserver-to-measure-a-changing-dom-element-in-vue-3jpd </a></p> </answer> </body></html>

vue.js observable mutation-observers

回答 0 投票 0

Javascript 突变观察器寻址 <li>

我使用突变观察器来观察元素发生的变化。观察时，我得到以下输出：我使用突变观察器来观察 <ul> 元素发生的变化。观察时，我得到以下输出： <li class="rt__body-row full flex gc-07 rt__body-row--odd"> <span class="rt__row-left short">48,359.50</span> <span class="rt__row-center">0.063</span> <span class="rt__row-right">01:57:44</span> </li> 现在我想写一个关于第二个跨度文本（0.063）的 if 语句。如何解决 JavaScript 中的第二个跨度？我对编程还很陌生，下面是我的代码： function obser1() { const trades = document.querySelector('.scrollbar-dark'); const observer = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { if (mutation.addedNodes.length) { console.log(mutation.addedNodes[0]); } }) }); console.log("obs1"); observer.observe(trades, { childList: true, subtree: true, attributes: true, characterData: true }) console.log("observed"); } window.setTimeout(obser1, 1700); 下面是我的清单文件： "name": "Bybit orderbook color", "version": "1.1", "manifest_version": 2, "content_scripts": [ { "matches": [ "https://www.bybit.com/trade/usdt/BTCUSDT" ], "css": [ "Style.css" ], "run_at": "document_idle", "js": [ "background.js" ] } ], "permissions": [ "activeTab" ] } 假设mutation.addedNodes[0]是一个html集合，你可以这样做 const vals = [...mutation.addedNodes[0].querySelectorAll("span")].map(span => span.textContent); 如果你可以做字符串 const fragment = document.createElement("div"); fragment.innerHMTL = mutation.addedNodes[0]; const vals = [...fragment.querySelectorAll("span")].map(span => span.textContent);

javascript google-chrome-extension mutation-observers

回答 1 投票 0

使用 MutationObserver 监听变化？

我有一个使用 setInterval 来检查某些对象状态的脚本，但它会导致一点滞后，我想知道是否可以使用 MutationObserver？我的设置间隔： var checkExist =

javascript mutation-observers

回答 2 投票 0

如何使用MutationObserver？

我最近遇到了这个很棒的 MutationObserver 功能，它可以跟踪任何 dom 元素的更改。我使用了 mozilla 开发者网络上显示的代码，但不能...

javascript mutation-observers

回答 3 投票 0

CSS操作的计算顺序

这是我的问题的最小示例：这是我的问题的最小示例： <div class="container"> <div class="dependent__height"></div> <div class="source__height"></div> </div> .container { display: flex; height: 500px; /* should not be there */ } .dependent__height { aspect-ratio: 16 / 9; background-color: yellow; } .source__height { width: 10px; height: 500px; /* can change arbitrary */ background-color: tomato; } 我想要实现的是.container不会设置高度，高度的唯一来源是.source__height。它会在运行时发生变化，一切都应该正常工作。我没有附加到弹性盒或其他东西，我只是想得到想要的行为（宽度将根据长宽比和.source__height的高度计算）我尝试了很多跳跃，还有 JavaScript。如果使用 MutationObserver 和同步高度，JavaScript 可能会工作，但非常笨拙，对于我的用例来说，编写和维护会非常痛苦。如果 .container 设置了高度，则可以正常工作：但如果 height 属性被删除则不然：注意：在现实场景中，我使用 <img> ，问题大致相同，可以通过该问题的解决方案来解决。如果你想要更多真实世界的例子，我也可以添加。这是一种通过网格实现您想要的效果的方法： .container { display: grid; grid-template-columns: 100% max-content; } .dependent__height { aspect-ratio: 16 / 9; background-color: yellow; } .source__height { width: 10px; height: 500px; /* can change arbitrary */ background-color: tomato; } <div class="container"> <div class="dependent__height"></div> <div class="source__height"></div> </div> 但是，如果宽度不够，则 16/9 的依赖高度将无法在该纵横比下增长到所需的完整高度。一种解决方案是将高度设置为 100%，但这会导致其溢出容器（添加轮廓以说明这一点）： .container { display: grid; grid-template-columns: 100% max-content; outline: 4px solid skyblue; } .dependent__height { aspect-ratio: 16 / 9; height: 100%; background-color: yellow; } .source__height { width: 10px; height: 500px; /* can change arbitrary */ background-color: tomato; } <div class="container"> <div class="dependent__height"></div> <div class="source__height"></div> </div> 希望这足以让您玩并获得您想要的东西，如果这不能完全回答所有问题，请通过编辑为您的问题添加详细信息，我可以更新我的答案

javascript html css aspect-ratio mutation-observers

回答 1 投票 0

检测节点何时被删除（或因为父节点被删除而从 DOM 中删除）

我想检测节点（例如nodeX）何时不再可用，要么是因为它被删除了，要么是因为它的父节点（或其父节点）被删除了。目前为止我能想到的就是用Muta...

javascript dom dom-events mutation-observers

回答 4 投票 0

mutation-observers 相关问题

最新问题