即时更改innerHTML设置 [英] Change innerHTML set on the fly

问题描述

我需要使用innerHTML即时更改在每个节点上设置的值.

I need to change on the fly the value set on every node using the innerHTML.

我找到的最接近的解决方案是:

The closest solution I found is:

...   
Object.defineProperty(Element.prototype, 'innerHTML', {
    set: function () {
        // get value (ok)
        var value = arguments[0];
        // change it (ok)
        var new_value = my_function(value);
        // set it (problem)
        this.innerHTML = new_value;              // LOOP
    }
}
...

但是显然这是一个无限循环. 有没有一种方法可以调用原始的innerHTML集?

But obviously it's an infinite loop. Is there a way to call the original innerHTML set?

我也尝试使用代理方式，但我无法使其正常工作.

I also try the Proxy way but i could not make it work.

更多详细信息:

我正在研究一个实验项目，该项目使用反向代理来生成CSP策略并将其添加到网站，所以:

I am working on an experimental project which uses a reverse proxy to generate and add CSP policies to a website, so:

• 网站所有者将了解这些"覆盖"
• 我需要处理所生成的任何js代码客户端，而这可能会触发 政策
• 在评估内容安全策略引擎之前，我需要对其进行修改！ (这是主要的问题，需要使用这种"不太好"解决方案)

• the owner of the website will be aware of these "overwrites"
• i needed to handle any js code client generated which could trigger the policy
• i need to modify it before the Content Security Policy engine evalution! (this is the main problem which requires this "non so good" solution)

推荐答案

强制性警告: 在任何生产级代码中，重写Element.prototype的任何属性的setter和getter注定是一个坏主意.如果您使用任何依赖innerHTML的库来正常工作，或者项目中还有其他开发人员不知道这些更改，那么事情可能会变得很奇怪.您还将失去在应用程序其他部分正常"使用innerHTML的功能.

Obligatory warning: Overriding the setter and getter for any property of Element.prototype is bound to be bad idea in any production-level code. If you use any libraries that rely on innerHTML to work as it should or if there are other developers in the project that don't know of these changes, things might get weird. You will also loose the ability to use innerHTML "normally" in other parts of the app.

也就是说，由于您还没有提供有关为什么的任何信息，因此，我只是假设您知道有关警告，而您仍然想覆盖该警告.浏览器自身的功能，可能出于开发目的.

That said, as you haven't provided any information about why you would want to do this, I'm just going to assume that you know about the caveats and you still want to override the browser's own functionality, perhaps for development purposes.

解决方案::您正在为Element.prototype.innerHTML覆盖浏览器的本机设置程序，但也需要原始设置程序来实现您的目标.可以使用 Object.getOwnPropertyDescriptor ，这是Object.defineProperty的对应".

Solution: You are overriding the browser's native setter for the Element.prototype.innerHTML, but you also need the original setter to achieve your goal. This can be done using Object.getOwnPropertyDescriptor, which is sort of the "counterpart" of Object.defineProperty.

(function() {
  
  //Store the original "hidden" getter and setter functions from Element.prototype
  //using Object.getOwnPropertyDescriptor
  var originalSet = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML').set;
  
  Object.defineProperty(Element.prototype, 'innerHTML', {
    set: function (value) {
        // change it (ok)
        var new_value = my_function(value);
        
        //Call the original setter
        return originalSet.call(this, new_value);
    }
  });
                        
  function my_function(value) {
    //Do whatever you want here
    return value + ' World!';
  }
                        
})();


//Test
document.getElementById('test').innerHTML = 'Hello';

<div id="test"></div>

这篇关于即时更改innerHTML设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！