脚本工作依赖于 IE 文档模式答案

【问题标题】：Script working dependent upon IE document mode脚本工作依赖于 IE 文档模式
【发布时间】：2012-05-26 13:58:32
【问题描述】：

我正在尝试用 JavaScript 编写一个小部件（使用 UWA 语法）。它在 FireFox 中运行得非常好，但 Internet Explorer 就……奇怪了。

基本上，当我第一次加载小部件时，它不会显示我的中心栏（它应该显示当天的职责列表）。

但是，如果我按 F12 并进入开发者控制台，我可以将 文档模式 更改为 IE9 standards 并使其正常工作。

如果我随后将 文档模式 设置为 Quirks，则显示如下：

定义中心列的代码如下：

/* [centre] Duty rota */
AllInOne.centreCol = function() {
    var now = new Date();
    var currentDay = now.getDay();

    var DRWeek1 = {
        Monday : {
            BeforeSchool : "HA, MJO, LS, GB, JSA, HA, TD",
            Breaks : "ABO, LL, RR, DR, PHd, JA, VID, AN, LDE, CN, DW, PG, MD, ND, CK, JP, RH, RJ, CC, GB",
            AfterSchool : "GB, CL, MVW, TD/GDO, HL, LS"
        },
        Tuesday : {
            BeforeSchool : "RJ, AN, AS, GB, JSA, SUW, MJO",
            Breaks : "DW, AB, RR, SDI, PHd, LL, ABO, ND, CG, CC, MD, PD, CT, RY, LDE, SC, RH, JR, RC, GB",
            AfterSchool : "GB, CL, MJO, TD/GDO, SUW, AS"
        },
        Wednesday : {
            BeforeSchool : "JP, JC, SM, GB, HSA, HA, CL",
            Breaks : "BW, JR, TG, SD, PHd, JM, SW, MVW, CG, AMO, MDA, KL, VID, CN, SDI, DST, VY, SLH, JH, GB",
            AfterSchool : "GB, MJO, CL, TD/GDO, HA, SM"
        },
        Thursday : {
            BeforeSchool : "SUW, HL, ST, GB, JSA, HL, CK",
            Breaks : "DR, VY, HL, CK, PHd, JC, DST, HS, SC, MDA, AH, PD, NB, AMO, HSM, DM, JOS, SLH, CK, GB",
            AfterSchool : "GB, JOR, JH, TD/GDO, HL, ST"
        },
        Friday : {
            BeforeSchool : "TG, SUW, JT, GB, JSA, JM, JP",
            Breaks : "SW, AB, HSM, HA, PHd, DM, JOS, CT, KL, BW, RY, PG, JA, NB, RC, HS, JOR, AH, GP, GB",
            AfterSchool : "GB, SWA, JM, TD/GDO, JP, JT"
        }
    }

    var DRHTML = '<h2>Duty Rota</h2>';

    switch ( currentDay ) {
        case 1:
            DRHTML += '<p><strong>Before School:</strong>' + DRWeek1.Monday.BeforeSchool + '</p>';
            DRHTML += '<p><strong>Break / Lunch:</strong>' + DRWeek1.Monday.Breaks + '</p>';
            DRHTML += '<p><strong>After School:</strong>' + DRWeek1.Monday.AfterSchool + '</p>';
            break;
        case 2:
            DRHTML += '<p><strong>Before School:</strong>' + DRWeek1.Tuesday.BeforeSchool + '</p>';
            DRHTML += '<p><strong>Break / Lunch:</strong>' + DRWeek1.Tuesday.Breaks + '</p>';
            DRHTML += '<p><strong>After School:</strong>' + DRWeek1.Tuesday.AfterSchool + '</p>';
            break;
        case 3:
            DRHTML += '<p><strong>Before School:</strong>' + DRWeek1.Wednesday.BeforeSchool + '</p>';
            DRHTML += '<p><strong>Break / Lunch:</strong>' + DRWeek1.Wednesday.Breaks + '</p>';
            DRHTML += '<p><strong>After School:</strong>' + DRWeek1.Wednesday.AfterSchool + '</p>';
            break;
        case 4:
            DRHTML += '<p><strong>Before School:</strong>' + DRWeek1.Thursday.BeforeSchool + '</p>';
            DRHTML += '<p><strong>Break / Lunch:</strong>' + DRWeek1.Thursday.Breaks + '</p>';
            DRHTML += '<p><strong>After School:</strong>' + DRWeek1.Thursday.AfterSchool + '</p>';
            break;
        case 5:
            DRHTML += '<p><strong>Before School:</strong>' + DRWeek1.Friday.BeforeSchool + '</p>';
            DRHTML += '<p><strong>Break / Lunch:</strong>' + DRWeek1.Friday.Breaks + '</p>';
            DRHTML += '<p><strong>After School:</strong>' + DRWeek1.Friday.AfterSchool + '</p>';
            break;
        default:
            DRHTML += '<p>No school. Yay!</p>';
            break;
    }

    var DutyRota = widget.createElement( 'p', 
        { 'id' : 'DR', 'class' : 'DR' } );
    widget.body.getElementsByClassName('centre_col')[0].appendChild(DutyRota);
    widget.body.getElementsByClassName('DR')[0].setHTML(DRHTML);
}

该功能中是否存在 Internet Explorer 不喜欢的内容？

我非常困惑，任何帮助将不胜感激。

编辑：完整代码

可以在这里找到：http://pastebin.com/n1qFeTnU

附加编辑：看起来小部件容器正在强制页面进入 IE9 怪癖模式。因此，这意味着我根本无法控制文档模式。

那么，问题仍然存在，在我的代码中，IE9（浏览器模式）Quirks（文档模式）中的 Internet Explorer 不喜欢什么？

【问题讨论】：

widget 对象是从哪里创建的，或者它是什么？ setHTML 方法我不熟悉。
您好。这是netvibes UWA 框架，可以在这里找到：dev.netvibes.com/doc/uwa。这是一个 HTML 文件，它被加载并使用 widget.onLoad = function(){} 函数来运行其代码。
控制台（F12 开发者工具）在不工作时是否显示任何错误？
令人沮丧的是，在这些模式中都没有任何错误。
首先想到的问题是“为什么 IE 在这个站点上默认为 Quirks 模式？”这表明您的标记中存在一些问题，这些问题可能也会在其他地方引起问题......

标签： javascript internet-explorer cross-browser

【解决方案1】：

这里有个提示，不要使用 Quirks 模式。它像 IE5.5 那样渲染，比 IE6 还要糟糕...

尝试将此标签添加到您的文件中：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

【讨论】：

你好，kolink。谢谢你的建议。我实际上尝试过这个（尽管IE-8 作为content），但它会阻止小部件加载 - 所以我认为，不幸的是，这不是一个选项。奇怪的是，我现在刚刚尝试了你的代码，它并没有改变任何东西。我不明白！哦，我讨厌 IE。
请注意：“由于边缘模式文档显示网页时使用的 Internet Explorer 版本可用于查看它们的最高模式，因此建议您仅将此文档模式用于测试目的仅限。请勿将其用于生产用途。” - msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx
我不同意这种逻辑。展望未来，您将永远不想为一个特定的渲染引擎编写 HTML。你永远不会为 Chrome、FF、Safari 等做这件事，那为什么要在 IE 上做呢？只需请求 edge 并编写有效的 HTML5 代码。
@pseudosavant “前进”是关键词。我们并不总是有能力重写现有应用程序的各个部分或开始新的应用程序。出于遗留支持的原因，边缘文档模型并不总是一种选择。 IE 还没有提供其他浏览器现在所做的从一个版本到另一个版本的平滑过渡。希望微软能在 IE 10 及更高版本中做到这一点。
@EricBrenden 我们必须同意不同意那个。可能想要添加一些动画 GIF，说明使用 Netscape Navigator 观看效果最佳。 IE9 和 IE10 现在与任何其他浏览器（如果不是更多）一样兼容 HTML5。 IE4-6（浏览器大战）的崩溃已经结束。

【解决方案2】：

首先，尝试删除您在 DOCTYPE 之前的 xml 字符串 <?xml version="1.0" encoding="utf-8"?>。即使对于 XHTML，它也不应该是必需的。在你的文档类型之前有任何东西可以触发怪癖模式。 W3C schools 表示 XHTML doctype 也应该是文档的第一行。

我想运行您的代码，因此我可以自己尝试，但我不能，因为您的 pastebin 示例不包含实际框架，因此脚本在到达未声明的“widget”变量时会中断。

编辑：我忘了说，如果上述方法有效，但您仍然需要声明您的 UTF-8 编码，您可以use a meta tag to do so。

最后，如果上述方法不起作用并且您确定兼容性视图不是您的问题（检查“工具\兼容性视图设置”），您可以尝试通过删除您的样式来调试它工作表并确认功能代码工作正常。

我的猜测是您的小部件在那里，但被渲染不佳的 CSS、某些浮动或 z 顺序或显示设置被误解所隐藏。慢慢添加样式可能会帮助您缩小问题的范围，以便您可以解决它。

我注意到，here，所有小部件都在 IFRAMES 中运行。在 IE 中，如果框架页面处于 quirks 模式，则 IFRAMES 以 quirks 模式呈现。我不确定这是否相关，因为您说小部件本身是强制怪癖模式的原因，但值得牢记。

【讨论】：

【解决方案3】：

首先要检查的是兼容性视图设置。例如，可以将其设置为默认为 IE7 模式。

【讨论】：

已经检查过了 - 它没有在兼容模式下运行。

【解决方案4】：

如果您想向后和跨浏览器兼容，IMO 最简单的修复方法是将文档类型设置为 HTML5 <!DOCTYPE html>。所有主流浏览器都支持这一点，这会强制 IE8 进入标准模式，就像 verify here 一样。我遇到了一些困难extending the Event prototype in IE8，切换到 HTML5 文档类型对我有用。虽然通常情况下，IE8 并不热衷于增加 dom 对象，但这确实有效，但没问题。不知道你可以用这个忍者知识强迫 IE8 下一步做什么:)

更新：

我查看了您的 pastebin，我只是想知道：您是否都删除了两个

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

和

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:frog="http://fdp.frogtrade.com/ns/">

线？用<!DOCTYPE html> 替换它们？乍一看，这也是MS suggests。你能告诉我现在的标题是什么样的吗？我会尝试复制这个问题，因为我对此有点感兴趣：D

更新2：

正如 jatrim 指出的：就 IE 而言，小部件是在 iFrame 中呈现的。在这种情况下，如果父文档以 quirks 模式呈现，则将 doctype 设置为 <!DOCTYPE html> 不会强制执行标准模式。也许您可以检查将父文档设置为<!DOCTYPE html> 是否有效。

【讨论】：

嗨，埃利亚斯。谢谢你，这将是一个可爱的快速修复。不幸的是，这是 IE9，当我实现你的标签时，没有任何变化。浏览器模式是“IE9”，但文档模式仍然是“怪癖模式”:(
啊哈 - 我在帖子中添加了一些附加信息，解释了为什么您的代码不起作用。感谢您的尝试。

【解决方案5】：

我认为 IE 如何在任何模式下显示您的页面并不重要。例如，如果 IE9 在默认情况下不以 Quirks 模式呈现您的页面，那么您为什么必须在那里修复错误？没有人（除了一些疯狂的人）会仅仅因为他们可以强制他们的 IE 进入默认不使用的渲染模式。

我检查浏览器的方法是：

为每个IE版本下载一个虚拟机http://www.microsoft.com/en-us/download/details.aspx?id=11575或者自己创建一个

使用以下代码作为 URL 创建收藏夹：

javascript:(function(){var%20vMode=document.documentMode;var%20rMode='IE5%20Quirks%20Mode';if(vMode==9){rMode='IE9%20Standards%20Mode';}else%20if(vMode==8){rMode='IE8%20Strict%20Mode';}else%20if(vMode==7){rMode='IE7%20Strict%20Mode';}alert('Rendering%20in:%20'+rMode+"\nId: "+vMode);})();

打开您的页面并通过点击收藏来执行上面的代码
您现在将看到一个消息框，您可以在其中查看您的页面在哪种模式下呈现

注意！该脚本仅处理 IE 版本 6-9。在 IE10 中，每当您的页面以 Quirks 模式显示时，它可能会显示给您。因此，我添加了您可以看到真实文档模式的 ID :)

如果您的页面（默认情况下）以 Quirks 模式呈现，我会搜索触发它的原因并在开始修复新浏览器中包含的 CSS 中的 IE5.5 的呈现错误之前将其删除.

有关 Quirks-Mode 的更多详情：http://www.quirksmode.org/css/quirksmode.html

【讨论】：

西蒙，谢谢。我正在开发的小部件适用于使用 UWA 小部件标准的 Frog VLE。因此，我显示的小部件包含在 Frog HTML 页面中 - 由于某种原因 - 默认情况下以 IE9 Quirks 模式呈现。 Frog 不（很容易）支持使用其他浏览器，所以我们整个学校都将使用相同版本的 IE9 来访问这个小部件。因此，我需要在这个特定的浏览器模式下修复代码。
@dunc：你知道为什么浏览器会切换到 Quirks 模式吗？您发布的示例代码并没有真正帮助。我只得到“widget is undefined.test.html, Line 333”...否则：使用 Kolink 建议的...应该强制使用最新的可能渲染引擎。

【解决方案6】：

由于getElementsByClassName 仅在 IE 9 中引入，我猜怪癖模式不会让你使用它。

即在您的代码末尾，您未能附加 DutyRota

【讨论】：

我也有类似的想法。但是，如果您查看完整的代码示例，其他 getElementsByClassName 调用工作正常。
完整的代码示例现在消失了，但是其他对getElementsByClassName 的调用是指父文档，而不是iframe？如果父级在标准模式下运行，它可以调用getElementsByClassName，而在 quirks 模式下运行的小部件 iframe 则不会。

【解决方案7】：

如果是IFRAME，注意如果父页面是IE9标准模式，子页面只能是这个模式或者“quirks mode emulation”模式。要在 IFRAME 中获得真正的 quirks 模式，父页面必须处于 IE8 或更早的模式，在这种情况下，子页面不能处于 IE9 模式，只能在 IE8 或更早的模式下。

【讨论】：