天道酬勤,学无止境

使用香草javascript和MutationObserver检测输入标签中的值变化(detect value change in input tag with vanilla javascript and MutationObserver)

问题

我想检测何时输入字段中的文本/值发生变化。 即使我用js更改了值,我也想检测到该更改。

到目前为止,这是我在小提琴演示中尝试过的方法。

HTML

<input type="text" id="exNumber"/>

JavaScript

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    // console.log('Mutation type: ' + mutation.type);
    if ( mutation.type == 'childList' ) {
      if (mutation.addedNodes.length >= 1) {
        if (mutation.addedNodes[0].nodeName != '#text') {
           // console.log('Added ' + mutation.addedNodes[0].tagName + ' tag.');
        }
      }
      else if (mutation.removedNodes.length >= 1) {
         // console.log('Removed ' + mutation.removedNodes[0].tagName + ' tag.')
      }
    }
     if (mutation.type == 'attributes') {
      console.log('Modified ' + mutation.attributeName + ' attribute.')
    }
  });   
});

var observerConfig = {
        attributes: true,
        childList: false,
        characterData: false
};

// Listen to all changes to body and child nodes
var targetNode = document.getElementById("exNumber");
observer.observe(targetNode, observerConfig);
回答1

要了解发生了什么,必须清除属性(内容属性)和属性(IDL属性)之间的差异。 我将不对此进行扩展,因为在SO中已经存在涉及该主题的出色答案:

  • HTML中的属性
  • .prop()与.attr()
  • .setAttribute和.attribute =之间发生了什么?

当您通过输入或通过JS更改input元素的内容时:

targetNode.value="foo";

浏览器将更新value属性,但不会更新value属性(它会反映defaultValue属性)。

然后,如果我们查看MutationObserver的规格,我们将看到属性是可以使用的对象成员之一。 因此,如果您明确设置value属性:

targetNode.setAttribute("value", "foo");

MutationObserver将通知属性修改。 但是在规范列表中没有类似属性的内容: value属性不能被观察到

如果要检测用户何时更改输入元素的内容,则输入事件是最直接的方法。 如果需要捕获JS修改,请使用setInterval并将新值与旧值进行比较。

检查此SO问题以了解不同的替代方案及其局限性。

回答2

可以观察到value属性,不要浪费时间。

 function changeValue (event, target) { document.querySelector("#" + target).value = new Date().getTime(); } function changeContentValue () { document.querySelector("#content").value = new Date().getTime(); } Object.defineProperty(document.querySelector("#content"), "value", { set: function (t) { alert('#changed content value'); var caller = arguments.callee ? (arguments.callee.caller ? arguments.callee.caller : arguments.callee) : '' console.log('this =>', this); console.log('event => ', event || window.event); console.log('caller => ', caller); return this.textContent = t; } });
 <form id="form" name="form" action="test.php" method="post"> <input id="writer" type="text" name="writer" value="" placeholder="writer" /> <br /> <textarea id="content" name="content" placeholder="content" ></textarea> <br /> <button type="button" >Submit (no action)</button> </form> <button type="button" onClick="changeValue(this, 'content')">Change Content</button>
回答3

这样可以正常工作,并保留和链接原始的二传手和getter,因此您所在领域的其他所有内容仍然可以使用。

var registered = [];
var setDetectChangeHandler = function(field) {
  if (!registered.includes(field)) {
    var superProps = Object.getPrototypeOf(field);
    var superSet = Object.getOwnPropertyDescriptor(superProps, "value").set;
    var superGet = Object.getOwnPropertyDescriptor(superProps, "value").get;
    var newProps = {
      get: function() {
        return superGet.apply(this, arguments);
      },
      set: function (t) {
        var _this = this;
        setTimeout( function() { _this.dispatchEvent(new Event("change")); }, 50);
        return superSet.apply(this, arguments);
      }
    };
    Object.defineProperty(field, "value", newProps);
    registered.push(field);
  }
}
回答4

我对Shawn的方法做了一些修改,并希望与大家分享。 不敢相信实际上有解决方案。

在输入框中键入以查看默认行为。 现在,打开DevTools并选择输入元素,然后更改其值,例如$0.value = "hello" 。 检查UI与API的区别。 似乎UI交互不会直接修改value属性。 如果是这样,它还将记录"...changed via API..."

 let inputBox = document.querySelector("#inputBox"); inputBox.addEventListener("input", function () { console.log("Input value changed via UI. New value: '%s'", this.value); }); observeElement(inputBox, "value", function (oldValue, newValue) { console.log("Input value changed via API. Value changed from '%s' to '%s'", oldValue, newValue); }); function observeElement(element, property, callback, delay = 0) { let elementPrototype = Object.getPrototypeOf(element); if (elementPrototype.hasOwnProperty(property)) { let descriptor = Object.getOwnPropertyDescriptor(elementPrototype, property); Object.defineProperty(element, property, { get: function() { return descriptor.get.apply(this, arguments); }, set: function () { let oldValue = this[property]; descriptor.set.apply(this, arguments); let newValue = this[property]; if (typeof callback == "function") { setTimeout(callback.bind(this, oldValue, newValue), delay); } return newValue; } }); } }
 <input type="text" id="inputBox" placeholder="Enter something" />

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 如何更改页面上加载的HTML内容(How to change the HTML content as it's loading on the page)
    问题 我在我们的网站上进行A / B测试,我的大部分工作都放在一个JS文件中,该文件在呈现任何其他内容之前(但在jQuery加载后有时会派上用场)加载到页面顶部。 以更改H1标签的非常简单的示例为例,我通常会在头部注入一种样式,以将H1不透明度设置为0,然后在DOMContentLoaded上,我将操纵H1内容,然后将不透明度设置为1。是为了避免更改之前发生旧内容的闪烁-将整个对象隐藏起来更加美观。 我已经开始研究MutationObserver API。 在更改用户可以打开的覆盖对话框中的内容之前,我曾经使用过此方法,这似乎是一种很酷的方法,我想知道是否有人在第一次加载文档时设法使用MutationObserver来监听文档/在第一次呈现之前和DOMContentLoaded之前解析并更改文档? 然后,这种方法可以让我更改H1内容,而不必隐藏,更改和显示它。 到目前为止,我已经尝试过但失败了,最后只是阅读了有关即将过时的突变事件,并想知道我是否正在尝试做一些不可能的事情。 但是我们(不是我)设法在火星上放了一个机器人,所以我希望我能解决这个问题。 因此,可以在页面加载/解析时使用MutationObservers即时更改HTML内容吗? 感谢您的帮助或指点。 问候,尼克 回答1 MDN上的文档有一个通用的不完整示例,没有展示常见的陷阱。 突变摘要库提供了易于使用的包装器
  • 是否有JavaScript / jQuery DOM更改侦听器?(Is there a JavaScript / jQuery DOM change listener?)
    问题 本质上,我想在DIV的内容更改时执行脚本。 由于这些脚本是分开的(Chrome扩展程序和网页脚本中的内容脚本),因此我需要一种方法来简单地观察DOM状态的变化。 我可以设置轮询,但这似乎草率。 回答1 长期以来,DOM3突变事件是最佳的可用解决方案,但由于性能原因,已不推荐使用它们。 DOM4突变观察者代替了不推荐使用的DOM3突变事件。 当前,它们在现代浏览器中以MutationObserver (或在旧版Chrome中以供应商前缀的WebKitMutationObserver形式实现): MutationObserver = window.MutationObserver || window.WebKitMutationObserver; var observer = new MutationObserver(function(mutations, observer) { // fired when a mutation occurs console.log(mutations, observer); // ... }); // define what element should be observed by the observer // and what types of mutations trigger the callback observer.observe
  • How to Implement DOM Data Binding in JavaScript(How to Implement DOM Data Binding in JavaScript)
    问题 请将此问题视为严格的教育意义。 我仍然有兴趣听到新的答案和想法来实现这一目标 tl; dr 如何使用JavaScript实现双向数据绑定? 数据绑定到DOM 通过将数据绑定到DOM,我的意思是例如拥有a具有属性b的JavaScript对象。 然后具有<input> DOM元素(例如),当DOM元素的变化, a变化,反之亦然(即,我的意思是双向数据绑定)。 这是AngularJS的示意图: 所以基本上我的JavaScript类似于: var a = {b:3}; 然后是一个输入(或其他形式)元素,例如: <input type='text' value=''> 我希望输入的值是ab的值(例如),并且当输入文本更改时,我也希望ab也更改。 当JavaScript中的ab更改时,输入也会更改。 问题 用普通的JavaScript可以完成这些工作的一些基本技术是什么? 具体来说,我想提供一个很好的答案: 绑定如何作用于对象? 如何聆听表格中的更改可能会起作用? 是否可以通过简单的方式仅在模板级别修改HTML? 我不想在HTML文档本身中跟踪绑定,而仅在JavaScript中跟踪(带有DOM事件,而JavaScript始终引用所使用的DOM元素)。 我尝试了什么? 我是Mustache的忠实粉丝,所以我尝试使用它进行模板制作。 但是,由于Mustache将HTML作为字符串处理
  • 如何在JavaScript中哈希后检测URL是否已更改(How to detect if URL has changed after hash in JavaScript)
    问题 如何检查JavaScript中的URL是否已更改? 例如,使用AJAX的GitHub之类的网站将在#符号后附加页面信息,以创建唯一的URL,而无需重新加载页面。 检测此URL是否更改的最佳方法是什么? 是否再次onload事件? URL是否有事件处理程序? 还是必须每秒检查一次URL以检测更改? 回答1 在现代浏览器(IE8 +,FF3.6 +,Chrome)中,您只能在window上监听hashchange事件。 在某些旧的浏览器中,您需要一个计时器来连续检查location.hash 。 如果您使用的是jQuery,则有一个插件可以完全做到这一点。 回答2 我希望能够添加locationchange事件侦听器。 经过下面的修改,我们将能够做到这一点,就像这样 window.addEventListener('locationchange', function(){ console.log('location changed!'); }) 与此相反, window.addEventListener('hashchange',()=>{})只会火如果在URL中的变化的主题标签,和之后的部分window.addEventListener('popstate',()=>{})没有按”总是工作。 此修改类似于Christian的答案,修改了历史对象以添加一些功能。 默认情况下
  • jQuery-检测隐藏输入字段上的值更改(jQuery - Detect value change on hidden input field)
    问题 我有一个隐藏的文本字段,其值通过AJAX响应进行更新。 <input type="hidden" value="" name="userid" id="useid" /> 当此值更改时,我想触发一个AJAX请求。 谁能提供有关如何检测更改的建议? 我有以下代码,但不知道如何查找值: $('#userid').change( function() { alert('Change!'); }) 回答1 所以这很晚了,但是我发现了一个答案,以防万一它对遇到此线程的任何人有用。 对隐藏元素的值更改不会自动触发.change()事件。 因此,无论您在哪里设置该值,您都必须告诉jQuery触发它。 function setUserID(myValue) { $('#userid').val(myValue) .trigger('change'); } 这样的话 $('#userid').change(function(){ //fire your ajax call }) 应该能按预期工作。 回答2 由于隐藏的输入不会在更改时触发“更改”事件,因此我使用MutationObserver来触发此操作。 (有时隐藏的输入值更改是由其他一些您无法修改的脚本完成的) 在IE10及以下版本中不起作用 MutationObserver = window.MutationObserver ||
  • 使用jQuery检测div的高度何时更改(Detecting when a div's height changes using jQuery)
    问题 我有一个div,其中包含一些要动态添加和删除的内容,因此其高度经常在变化。 我也有一个绝对位于javascript正下方的div,因此,除非我能检测到div的高度何时发生变化,否则无法将div重新定位在其下面。 那么,如何检测该div的高度何时变化? 我假设我需要使用一些jQuery事件,但是我不确定要挂入哪个事件。 回答1 使用css-element-queries库中的调整大小传感器: https://github.com/marcj/css-element-queries new ResizeSensor(jQuery('#myElement'), function() { console.log('myelement has been resized'); }); 它使用基于事件的方法,并且不会浪费您的CPU时间。 适用于所有浏览器,包括 IE7 +。 回答2 我有时为attrchange监听器写了一个插件,它基本上在属性更改时添加了一个监听器功能。 即使我说它是一个插件,但实际上它是一个写为jQuery插件的简单函数。所以,如果需要的话,请剥离插件特定的代码并使用核心函数。 注意:此代码不使用轮询 看看这个简单的演示http://jsfiddle.net/aD49d/ $(function () { var prevHeight = $('#test')
  • 如何检测DIV的尺寸变化?(How to detect DIV's dimension changed?)
    问题 我有以下示例html,有一个DIV,其宽度为100%。 它包含一些元素。 在执行窗口调整大小时,内部元素可能会重新放置,并且div的尺寸可能会更改。 我问是否有可能挂钩div的尺寸更改事件? 以及如何做到这一点? 我目前将回调函数绑定到目标DIV上的jQuery resize事件,但是,没有控制台日志输出,请参见以下内容: <html> <head> <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script type="text/javascript" language="javascript"> $('#test_div').bind('resize', function(){ console.log('resized'); }); </script> </head> <body> <div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;"> <input type="button" value="button 1" /> <input type="button" value="button
  • 在jQuery中触发CSS类更改事件(Firing events on CSS class changes in jQuery)
    问题 如果使用jQuery添加或更改CSS类,如何触发事件? 更改CSS类是否会触发jQuery change()事件? 回答1 每当您在脚本中更改类时,都可以使用trigger引发自己的事件。 $(this).addClass('someClass'); $(mySelector).trigger('cssClassChanged') .... $(otherSelector).bind('cssClassChanged', data, function(){ do stuff }); 但是否则,没有什么办法可以在类更改时触发事件。 change()仅在焦点离开其输入已更改的输入后才触发。 $(function() { var button = $('.clickme') , box = $('.box') ; button.on('click', function() { box.removeClass('box'); $(document).trigger('buttonClick'); }); $(document).on('buttonClick', function() { box.text('Clicked!'); }); }); .box { background-color: red; } <script src="https://ajax.googleapis
  • jQuery事件:检测对div的html / text的更改(jQuery Event : Detect changes to the html/text of a div)
    问题 我有一个div,它的内容一直在变化,它是ajax requests , jquery functions , blur等。 有什么方法可以随时检测div上的任何更改吗? 我不想使用任何间隔或检查的默认值。 这样的事情会做 $('mydiv').contentchanged() { alert('changed') } 回答1 如果您不想使用计时器并检查innerHTML,则可以尝试此事件 $('mydiv').bind('DOMSubtreeModified', function(){ console.log('changed'); }); 更多详细信息和浏览器支持数据在这里。 注意:在较新的jQuery版本中,不建议使用bind(),因此应改为使用on(): $('body').on('DOMSubtreeModified', 'mydiv', function(){ console.log('changed'); }); 回答2 使用Javascript MutationObserver //More Details https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver // select the target node var target = document.querySelector(
  • AngularJS 1.5+组件不支持Watchers,如何解决?(AngularJS 1.5+ Components do not support Watchers, what is the work around?)
    问题 我一直在将自定义指令升级到新的组件体系结构。 我读过,组件不支持观察者。 这样对吗? 如果是这样,您如何检测对象的变化? 对于一个基本示例,我有一个自定义组件myBox ,它具有一个子组件游戏,并带有游戏绑定。 如果游戏组件中有找零游戏,如何在myBox中显示警告消息? 我知道有rxJS方法是否可以纯粹在角度上做到这一点? 我的JSFiddle 的JavaScript var app = angular.module('myApp', []); app.controller('mainCtrl', function($scope) { $scope.name = "Tony Danza"; }); app.component("myBox", { bindings: {}, controller: function($element) { var myBox = this; myBox.game = 'World Of warcraft'; //IF myBox.game changes, show alert message 'NAME CHANGE' }, controllerAs: 'myBox', templateUrl: "/template", transclude: true }) app.component("game", { bindings: {game
  • 如何将onload事件添加到div元素(How to add onload event to a div element)
    问题 如何将onload事件添加到元素? 我可以用吗: <div onload="oQuickReply.swap();" ></div> 为了这? 回答1 不,你不能。 最简单的方法是将函数调用直接放在元素之后 例子: ... <div id="somid">Some content</div> <script type="text/javascript"> oQuickReply.swap('somid'); </script> ... 或者-甚至更好-就在</body>前面: ... <script type="text/javascript"> oQuickReply.swap('somid'); </script> </body> ...因此它不会阻止以下内容的加载。 回答2 onload事件只能在document(body)本身,框架,图像和脚本上使用。 换句话说,它可以仅附加到主体和/或每个外部资源。 div不是外部资源,它是作为正文的一部分加载的,因此onload事件不适用于该资源。 回答3 您可以使用onerror而不使用src在IMG元素上自动触发一些js。 <img src onerror='alert()'> 回答4 onload事件仅支持以下几个标签。 <body>, <frame>, <iframe>, <img>, <input type="image
  • 检测我所做的属性值的属性变化(Detecting attribute change of value of an attribute I made)
    问题 我在HTML data-select-content-val创建了一个属性,该属性动态填充了信息。 有没有一种方法可以检测属性值何时更改? $(document).on("change", "div[data-select-content-val]", function(){ alert("BOOP!"); }); 回答1 您将必须注意DOM节点的更改。 有一个名为MutationObserver的API,但似乎对其的支持非常有限。 这样的答案有一个指向API状态的链接,但是到目前为止,似乎在IE或Opera中都没有对它的支持。 解决该问题的一种方法是让修改data-select-content-val属性的代码部分调度可以监听的事件。 例如,有关如何将它们捆绑在一起的信息,请参见:http://jsbin.com/arucuc/3/edit。 这里的代码是 $(function() { // Here you register for the event and do whatever you need to do. $(document).on('data-attribute-changed', function() { var data = $('#contains-data').data('mydata'); alert('Data changed to: ' +
  • 动态创建元素的jQuery“创建时”事件(jQuery “on create” event for dynamically-created elements)
    问题 我需要能够动态创建<select>元素并将其转换为jQuery .combobox() 。 这应该是元素创建事件,而不是某些“单击”事件,在这种情况下,我可以只使用jQuery .on() 。 那么是否存在类似的东西? $(document).on("create", "select", function() { $(this).combobox(); } 我不愿意使用livequery,因为它已经过时了。 更新提到的选择/组合框通过ajax加载到jQuery彩色框(模态窗口)中,因此出现了问题-我只能使用colorbox onComplete来启动组合框,但是在更改一个组合框时,必须动态创建另一个选择/组合框,为此,我需要一种检测元素创建的更通用的方法(在这种情况下,请select )。 UPDATE2为了尝试进一步解释问题-我递归创建了select/combobox元素, .combobox()也有很多启动代码,因此,如果我使用经典方法,例如@bipen的答案,我的代码会膨胀达到疯狂的水平。 希望这可以更好地解释问题。 UPDATE3谢谢大家,我现在理解,由于DOMNodeInserted弃用,DOM突变中留下了空白,并且没有解决此问题的方法。 我只需要重新考虑我的申请即可。 回答1 您可以在DOMNodeInserted事件上获取一个事件
  • 有没有一种方法可以对输入字段的值的一部分进行样式设置? [复制](Is there a way to style part of an input field's value? [duplicate])
    问题 这个问题已经在这里有了答案: 有什么办法可以改变占位符的一个单词的颜色(2个答案) 6个月前关闭。 我正在使用<input>字段,并且我希望在用户以其他颜色键入时设置部分字段的样式。 例如,假设<input>有一个color: red;的样式声明color: red; 我想将其一部分更改为color: blue; 。 有什么办法可行吗? 如果没有(我怀疑),那么关于如何在保持语义标记的同时如何模拟这种效果的任何创造性想法? 回答1 您的猜想是正确的:样式仅适用于整个输入。 由于样式只能应用于整个元素,因此一种解决方案将要求每种所需颜色至少包含一个元素。 考虑相对于用户进行更改的点的输入字段的划分。 输入分为三部分: 在应用更改之前在应用更改之后在这一点上正在应用更改 您无法使用单个输入元素来实现此目的。 并且随着更改的应用点可以更改,由三个元素包装的“输入”部分也将更改。 解决方案需要JavaScript。 您最初应包括常规输入元素,并放弃任何所需的颜色。 使用JavaScript将输入替换为合适的容器元素。 可以设置样式以模仿输入元素。 随着更改的发生,请使用JavaScript来识别上述三个部分。 根据需要将它们包装在合适的元素中(最好是跨度)和颜色。 对于生成的替换标记,请考虑以下起点: <div class="input"> <span class=
  • 使用浏览器后退按钮时如何强制重新加载页面?(How to force reloading a page when using browser back button?)
    问题 我需要以某种方式检测到用户已按下浏览器的后退按钮,并使用jquery刷新页面(刷新内容和CSS)。 如何通过jQuery检测到这样的动作? 因为现在,如果我在浏览器中使用“后退”按钮,则不会重新加载某些元素。 但是,如果我使用网站中的链接,则所有内容都会刷新并正确显示。 重要的! 有些人可能误解了我想要的东西。 我不想刷新当前页面。 我想刷新按下后退按钮后加载的页面。 这是我更详细的意思: 用户正在访问第1页。 在第1页上时-他单击到第2页的链接。 他被重定向到page2 现在(重要的部分!),他单击浏览器中的“后退”按钮,因为他想返回到第1页他回到了page1上-现在正在重新加载page1,并且出现类似“您回来了!”的警报。 回答1 您可以使用pageshow事件来处理浏览器通过历史记录遍历到页面时的情况: window.addEventListener( "pageshow", function ( event ) { var historyTraversal = event.persisted || ( typeof window.performance != "undefined" && window.performance.navigation.type === 2 ); if ( historyTraversal ) { // Handle page
  • jQuery / JavaScript冲突检测(jQuery/JavaScript collision detection)
    问题 如何检测两个<div>元素是否发生冲突? 两个div是简单的彩色框,彼此垂直,因此没有复杂的形状或角度。 回答1 var overlaps = (function () { function getPositions( elem ) { var pos, width, height; pos = $( elem ).position(); width = $( elem ).width(); height = $( elem ).height(); return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ]; } function comparePositions( p1, p2 ) { var r1, r2; r1 = p1[0] < p2[0] ? p1 : p2; r2 = p1[0] < p2[0] ? p2 : p1; return r1[1] > r2[0] || r1[0] === r2[0]; } return function ( a, b ) { var pos1 = getPositions( a ), pos2 = getPositions( b ); return comparePositions( pos1[0], pos2[0] ) &&
  • Feature learning and change feature classification based on deep learning for change detection
    Feature learning and change feature classification based on deep learning for ternary change detection in SAR images 摘要 三元变更检测旨在检测变化,并将变化变为积极变化和负变化。在空间颞织物合成孔径雷达图像的联合解释中具有重要意义。在本研究中,结合了稀疏的AutoEncoder,卷积神经网络(CNN)和无监督的聚类,以解决Ternary变更检测问题而无需任何监督。首先,稀疏的autoEncoder用于将对数比差异图像转换为适当的特征空间,以提取密钥变化和抑制异常值和噪声。然后,学习功能被聚集成三个类,这被视为伪标签,用于培训CNN模型作为变更特征分类器。 CNN的可靠培训样本选自稀疏AutoEncoder具有某些选择规则的稀疏自动码器的特征映射。具有训练样本和相应的伪标签,可以通过使用随机梯度下降来训练CNN模型。在其培训程序期间,CNN被驱动以学习变革的概念,建立更强大的模型来区分不同类型的变化。与传统方法不同,所提出的框架集成了稀疏自动化器和CNN的优点,以了解更多强大的差异表示和三元变化检测的变化概念。实验结果对实时数据集验证了所提出的框架的有效性和优越性。 1. Introduction
  • 检测DOM中的更改(Detect changes in the DOM)
    问题 当某些div或输入添加到html时,我想执行一个函数。 这可能吗? 例如,添加文本输入,然后应调用该函数。 回答1 2015年更新,现代的浏览器支持新的MutationObserver: Chrome 18以上版本,Firefox 14以上版本,IE 11以上版本,Safari 6以上版本 如果您需要支持较旧的方法,则可以尝试使用其他方法,例如下面这个5 (!)年的答案中提到的方法。 有龙。 享受 :) 有人在更改文档吗? 因为如果您完全控制更改, domChanged需要创建自己的domChanged API(带有函数或自定义事件),然后在您修改所有内容时触发/调用它即可。 DOM Level-2具有Mutation事件类型,但是旧版本的IE不支持它。 请注意,DOM3事件规范中已弃用了突变事件,并且会降低性能。 您可以尝试通过IE中的onpropertychange来模拟突变事件(如果没有可用的方法,则可以使用蛮力方法)。 对于完整的domChange,间隔可能是一个过大的杀伤力。 想象一下,您需要存储整个文档的当前状态,并检查每个元素的每个属性是否相同。 也许如果您仅对元素及其顺序感兴趣(如您在问题中所提到的),则getElementsByTagName("*")可以工作。 如果您添加元素,删除元素,替换元素或更改文档的结构,则会自动触发。 我写了一个概念证明:
  • 调整iframe的宽度和高度以适合其中的内容(Adjust width and height of iframe to fit with content in it)
    问题 我需要一种自动调整iframe的width和height以使其几乎不适合其内容的解决方案。 关键是在加载iframe后可以更改宽度和高度。 我想我需要一个事件操作来处理iframe中包含的主体尺寸的变化。 回答1 <script type="application/javascript"> function resizeIFrameToFitContent( iFrame ) { iFrame.width = iFrame.contentWindow.document.body.scrollWidth; iFrame.height = iFrame.contentWindow.document.body.scrollHeight; } window.addEventListener('DOMContentLoaded', function(e) { var iFrame = document.getElementById( 'iFrame1' ); resizeIFrameToFitContent( iFrame ); // or, to resize all iframes: var iframes = document.querySelectorAll("iframe"); for( var i = 0; i < iframes.length; i++) {
  • 停止执行Javascript功能(客户端)或对其进行调整(Stop execution of Javascript function (client side) or tweak it)
    问题 我想停止从站点执行一行代码,以便浏览器可以读取除该行之外的整个页面。 或者浏览器可能只是跳过该javascript函数的执行。 或者 有没有办法我可以以某种方式调整javascript,以便javascript中的随机数生成函数不会生成随机数,而是我想要的数字... 我无权访问托管脚本的网站,因此所有这些操作都需要在客户端完成。 回答1 火狐目前支持beforescriptexecute事件(如4版的,于2011年3月22日发布)‡。 通过该事件和// @ run-at document-start指令,Firefox和Greasemonkey现在似乎在拦截特定的<script>标记方面做得很好。 对于Chrome + Tampermonkey仍然无法实现。 对于除Firefox + Greasemonkey以外的任何功能,您将需要使用以下其他答案所示的技术来编写完整的浏览器扩展。 checkForBadJavascripts函数对此进行了封装。 例如,假设页面具有<script>标记,如下所示: <script> alert ("Sorry, Sucka! You've got no money left."); </script> 您可以像这样使用checkForBadJavascripts : checkForBadJavascripts ( [ [ false,