IE 特定的 js 错误

Question

我在 IE 浏览器中遇到了这个 js 错误。

SCRIPT5009: 'encodeURIComponent' is undefined 
about, line 53 character 13

这是负责的js文件

(function ($) {
  Drupal.color = {
    logoChanged: false,
    callback: function(context, settings, form, farb, height, width) {
      // Change the logo to be the real one.
      if (!this.logoChanged) {        
        $('#preview #preview-logo img').attr('src', Drupal.settings.color.logo);
        this.logoChanged = true;        
      }
      // Remove the logo if the setting is toggled off. 
      if (Drupal.settings.color.logo == null) {
        $('div').remove('#preview-logo');        
      }

      // Solid background.
      $('#preview', form).css('backgroundColor', $('#palette input[name="palette[bg]"]', form).val());      


      $('#preview #preview-main-menu', form).css('background-color', $('#palette input[name="palette[top-menu-bg]"]', form).val());

      $('#preview .preview-content-slideshow a', form).css('color', $('#palette input[name="palette[all-links]"]', form).val());

      // Text preview.
      //$('#preview #preview-main h2, #preview .preview-content', form).css('color', $('#palette input[name="palette[text]"]', form).val());
      $('#preview #preview-content a', form).css('color', $('#palette input[name="palette[link]"]', form).val());

      // Sidebar block.
      $('#preview #preview-sidebar #preview-block', form).css('background-color', $('#palette input[name="palette[sidebar]"]', form).val());
      $('#preview #preview-sidebar #preview-block', form).css('border-color', $('#palette input[name="palette[sidebarborders]"]', form).val());

      // Footer wrapper background.
      $('#preview #preview-footer-wrapper', form).css('background-color', $('#palette input[name="palette[footer]"]', form).val());

      // CSS3 Gradients.
      var gradient_start = $('#palette input[name="palette[top]"]', form).val();
      var gradient_end = $('#palette input[name="palette[bottom]"]', form).val();

      // Menu preview 
      $('#preview #preview-main-menu-links a', form).css('color', $('#palette input[name="palette[sf-menu-sf-style-metroz-a]"]', form).val());

      $('#preview #preview-main-menu-links li', form).css('background-color', $('#palette input[name="palette[sf-menu-sf-style-metroz-li]"]', form).val());


      //$('#preview #preview-header', form).attr('style', "background-color: " + gradient_start + "; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(" + gradient_start + "), to(" + gradient_end + ")); background-image: -moz-linear-gradient(-90deg, " + gradient_start + ", " + gradient_end + ");");
      $('#preview #preview-header', form).attr('style', "background-color: " + $('#palette input[name="palette[header-wrapper]"]', form).val());

      $('#preview #preview-site-name', form).css('color', $('#palette input[name="palette[titleslogan]"]', form).val());

      $('#preview #preview-content h1 a', form).css('color', $('#palette input[name="palette[slideshow-title-text-color]"]', form).val());

      $('#preview #preview-content, #preview #preview-content h1', form).css('background-color', $('#palette input[name="palette[slideshow]"]', form).val());
      $('#preview-node').css('color', '#FFFFFF');

      $('#preview .pagination a.active', form).css('background-color', $('#palette input[name="palette[pagination]"]', form).val());

      $('#preview .search', form).css('background-color', $('#palette input[name="palette[search-button-color]"]', form).val());

      $('#preview .view-more', form).css('background-color', $('#palette input[name="palette[slideshow-wrapper-bg-color]"]', form).val());

      $('#preview .view-more a', form).css('color', $('#palette input[name="palette[slideshow-wrapper-text-color]"]', form).val());

      $("#preview #preview-main-menu-links a").mouseover(function(){
          $(this).css('color', $('#palette input[name="palette[sf-menu-sf-style-metroz-a-hover]"]', form).val());
      });
      $("#preview #preview-main-menu-links a").mouseleave(function(){
          $(this).css('color', $('#palette input[name="palette[sf-menu-sf-style-metroz-a]"]', form).val());
      });

      $("#preview #preview-main-menu-links li").mouseover(function(){
          $(this).css('background', $('#palette input[name="palette[sf-menu-sf-style-metroz-li-hover]"]', form).val());
      });
      $("#preview #preview-main-menu-links li").mouseleave(function(){
          $(this).css('background', $('#palette input[name="palette[sf-menu-sf-style-metroz-li]"]', form).val());
      });
    }
  };
  $(document).ready(function($) {       
     var pos = $('#color_scheme_form').position();
     if (pos.top > 350) {
         $('#preview').hide();
         $('#placeholder').hide();
         $('.color-form > h2').hide();
     }

  });

  $(document).scroll(function(e) {
    var pos = $('#color_scheme_form').position();
    var scrollTop = $(this).scrollTop();
    if (scrollTop > (pos.top - 50)) {
        $('#preview').show();
        $('#placeholder').show();
        $('.color-form > h2').show();
        $('#preview').removeAttr('style');
        $('#placeholder').removeAttr('style');
        $('.color-form > h2').removeAttr('style');
    }    
    else {
        $('#preview').hide();
        $('#placeholder').hide();
        $('.color-form > h2').hide();
    }
  });

})(jQuery);

核心 Preview.js：

/** * @文件 * 为颜色模块附加与预览相关的行为。 */

(function ($) {
  Drupal.color = {
    callback: function(context, settings, form, farb, height, width) {
      // Solid background.
      $('#preview', form).css('backgroundColor', $('#palette input[name="palette[base]"]', form).val());

      // Text preview
      $('#text', form).css('color', $('#palette input[name="palette[text]"]', form).val());
      $('#text a, #text h2', form).css('color', $('#palette input[name="palette[link]"]', form).val());

      // Set up gradients if there are some.
      var color_start, color_end;
      for (i in settings.gradients) {
        color_start = farb.unpack($('#palette input[name="palette[' + settings.gradients[i]['colors'][0] + ']"]', form).val());
        color_end = farb.unpack($('#palette input[name="palette[' + settings.gradients[i]['colors'][1] + ']"]', form).val());
        if (color_start && color_end) {
          var delta = [];
          for (j in color_start) {
            delta[j] = (color_end[j] - color_start[j]) / (settings.gradients[i]['vertical'] ? height[i] : width[i]);
          }
          var accum = color_start;
          // Render gradient lines.
          $('#gradient-' + i + ' > div', form).each(function () {
            for (j in accum) {
              accum[j] += delta[j];
            }
            this.style.backgroundColor = farb.pack(accum);
          });
        }
      }
    }
  };
})(jQuery);

这将更改 Drupal 中主题的预览选项。

在 IE10 中它的工作没有任何问题，而在 ie9、ie8、ie7 中它会抛出这个“encodeURIComponent”错误。

我不知道如何纠正这个问题。任何帮助将不胜感激。提前致谢。

Answer 1

我不确定这是否是同一个问题，但在this thread 中提出了类似的问题（这是另一个问题的链接）。

这是 IE 的一种不寻常的行为，通常是在尝试将外部框架包含到页面的 DOM 时。

也许如果您确保将动态添加到页面的任何内容附加到页面 DOM 的 body 标记范围内，那么它可能会对此事有所了解。

// External content:
$externalContent = $(/*external content object*/);
// Create a placeholder for your content:
$div = $("<div></div>");
// Append the content to the <div> placeholder:
$div.append($externalContent);
// Append the placeholder to your DOM, it doesn't have to be the "body" tag
// but also any other placeholder within the body scope
$("body").append($div);