Firefox iframe getComputedStyle 错误的 Javascript 解决方法答案

【问题标题】：Javascript workaround for firefox iframe getComputedStyle bugFirefox iframe getComputedStyle 错误的 Javascript 解决方法
【发布时间】：2015-09-18 19:38:12
【问题描述】：

我正在尝试对隐藏的 iframe/getComputedSytle firefox 错误 548397 使用以下解决方法。

if (/firefox/i.test(navigator.userAgent)){
   window.oldGetComputedStyle = window.getComputedStyle;
   window.getComputedStyle = function (element, pseudoElt) {
      var t = window.oldGetComputedStyle(element, pseudoElt);
      if (t === null) {
         return {};
      } else{
         return t;
      }
   };
}

但在我的情况下，我还需要getComputedSytle.getPropertyValue，即我收到以下错误：

TypeError: my_window.getComputedStyle(...).getPropertyValue is not a function

如何在上述解决方法中添加getPropertyValue？

【问题讨论】：

除了display:none 之外，你不能只使用另一种“隐藏” iframe 的方法吗？在错误报告中已经建议使用visibility: hidden; position: absolute; 代替——视觉效果应该相似，但您不必处理这个“错误”。（引号中的“错误”，因为具有display:none 的元素的本质是它们实际上并没有被渲染，所以实际上没有没有计算的样式值可供读取 [尽管其他浏览器可能以不同的方式处理。])
我今天遇到了这个问题（在 FireFox 47 中），即使我的 iframe 本身没有设置为 display:none。症状是 iframeResizer 仅在 FireFox 中失败。原因是我们遇到了这个错误，因为 iframe 包含在折叠的手风琴段的子项中，因此在页面加载时不显示。因此，感谢您提出的解决方法和解决方案。

标签： javascript firefox iframe

【解决方案1】：

你可以只创建一个空函数：

if (/firefox/i.test(navigator.userAgent)){
   window.oldGetComputedStyle = window.getComputedStyle;
   window.getComputedStyle = function (element, pseudoElt) {
      var t = window.oldGetComputedStyle(element, pseudoElt);
      if (t === null) {
         return {
            getPropertyValue: function(){}
         };
      } else{
         return t;
      }
   };
}

【讨论】：

【解决方案2】：

我认为更好的解决方案是这个

function setFirefoxPolyfill() {
  if (/firefox/i.test(navigator.userAgent)){
    window.oldGetComputedStyle = window .getComputedStyle;
    window.getComputedStyle = function (element, pseudoElt) {
      var t = window.oldGetComputedStyle(element, pseudoElt);
      if (t === null) {
        return element.style;
      } else{
        return t;
      }
    };
  }
}

在null 响应的情况下，您只需返回包含所有原型方法和字段的元素样式

【讨论】：