0

我有需要显示代码文件的 iframe。代码文件具有 .txt 扩展名,应该只将代码显示为文本。这适用于除 IE8 之外的所有浏览器。IE8 不断将代码文件呈现为 HTML。

    <iframe id="codeFile222" 
    width="100%" height="200px"
    marginheight="0" frameborder="0" 
    src="http://mrsbos.wikispaces.com/file/view/guessNumber.txt"
    name="codeFile222" 
    onload="autoResize('codeFile222');changeColor('codeFile222')"
    >

知道我能做些什么,让它在 IE8 中工作

4

4 回答 4

1

您提供的链接(mrsbos.wikispaces.com/file/view/guessNumber.txt)的内容类型为 text/plain,这样就可以了。

要找出内容类型是什么,您可以使用Fiddler或只需右键单击页面并选择页面信息或类似内容(取决于浏览器)。

我的猜测是 IE 试图聪明地自动检测内容,看到一个<script>标签并假设它是 html。

在这些情况下,您必须对内容进行编码,如果可能的话,可以选择显示一个 html 页面,而不是来自源代码位于<pre>-tags 中的服务器。

于 2013-05-21T02:32:50.627 回答
0

这个问题已经存在了一段时间,不幸的是并没有真正的解决方法。可能有用的一件事是使用 Javascriptiframe<pre>标签将所有内容包装在其中,但这有点小技巧。

有关该问题的更多信息,请访问www.howtocreate.co.uk,我将在此处复制文章的正文:

虽然我们讨论的是 Content-type HTTP 标头,但 XHTML 并不是 IE 出错的唯一一个。它甚至会错误地处理纯文本。如果您发送一个标头,说明您使用的是纯文本,但它包含 IE 认为是 HTML 的内容,它将忽略您的标头,并将其呈现为 HTML。因此,您精心准备的文本文件将转换为几乎不可读的插入段落,其中缺少位和格式丢失。

他们为什么要这样做?因为偶尔,Web 服务器会错误地将 HTML 页面作为纯文本提供。如果发生这种情况,这将使 IE 将其呈现为 HTML。这听起来是个好主意,但这意味着制作这些页面的作者没有意识到他们的页面被错误地作为文本提供,因为当他们在 IE 中检查它时,它看起来像是在工作。正确符合页面指定的内容类型的浏览器将看到页面源而不是其内容。而且,这意味着许多文本文件被错误地破坏了,因为 IE 认为它们是 HTML。

不管怎样,总有人输了。但是如果 IE 没有忽略文本 Content-type 头,作者就会意识到有问题,而是修复服务器。该页面适用于所有浏览器,并且 IE 不会破坏文本文件。

于 2013-05-21T03:14:08.597 回答
0

Content-TypeHTTP 标头指示资源的MIME类型(网页、图像或下载)。对于 HTML 页面,MIME 类型通常是text/html,对于文本文件,通常是text/plain

服务器确实会发送text/plain;charset=utf-8您的文本文件(例如,当使用+执行文件的硬重新加载时,如Firebug的 Net 面板中所示)。但是,与其他 Web 浏览器不同,Internet Explorer 会在文件中看到 HTML 并猜测服务器(Microsoft 文档)。CtrlF5

因为这可能会产生安全隐患,但微软不想冒险破坏与旧网站的向后兼容性(通过使 IE 的行为与其他浏览器的行为一致),Internet Explorer 8 和更高版本支持X-Content-Type-Options: nosniff在这种情况下禁用 HTML 检测的标题. 但是,在像 Wikispaces 这样的网站上,您可能没有发送标题的选项,而且无论如何,标题在 Internet Explorer 6 和 7 中都不起作用。

在 Wikispaces 上,使用提供的源代码格式化功能可能是有意义的(请参阅wikitext 帮助页面):

[[code format="javascript"]]
alert('hello, world');
[[code]]

如果您想将代码存储在单独的页面上,您可以从人们实际应该阅读的页面中包含它(Wikispaces 包括帮助页面)。这称为嵌入

[[include page="PAGENAME"]]

如果做不到这一点,一个不错的选择可能是对代码进行 HTML 转义(使用一些文本替换)并将其插入<pre></pre>. 然后您将上传一个 HTML 文件(文件扩展名为.htm.html)。出于解释的目的,这里有一个简单的 JavaScript 函数,它可以进行 HTML 转义:

function htmlEscape(text) {
    // Absolutely necessary
    text = text.replace(/&/g, '&amp;'); // Has to go first
    text = text.replace(/</g, '&lt;');

    // Not needed for your specific case, yet would be good to include
    text = text.replace(/>/g, '&gt;');
    text = text.replace(/"/g, '&quot;');
    text = text.replace(/'/g, '&#39;'); // '&apos;' is only OK in XHTML and in HTML5
    return text;
}
于 2013-05-21T04:21:59.637 回答
0

我现在已经使用了您建议的 turnToText 函数。起初,结果只会以纯文本形式显示 HTML 标签,而不是脚本。很明显,浏览器已经把脚本标签和它的内容放在了一个头标签中。所以我可以将它们从那里拉出来并将它们添加到代码的其余部分中。我的功能现在看起来像这样。我只需要通过添加非空白换行符等来为结果提供更好的布局。

    turnToText2=function(id){
    if(window.XMLHttpRequest && document.all){

    var text=null;
    var obj=document.getElementById(id);
    var y=null;

     y=(obj.contentDocument|| obj.contentWindow);


    var head =y.getElementsByTagName('head')[0];
    var texth=head.innerHTML;

    text=y.body.innerHTML;
    text=texth+text;

    while(text.indexOf("<")!=-1){
    text=text.replace("<","&lt;");
    }
    while(text.indexOf(">")!=-1){
        text=text.replace(">","&gt;");
    } 

    if(y!=null){
   y.body.innerHTML=text;
   }

   } else{
    console.log("NOT IE:");
    }
    }

多谢

顺便说一句,我还将使用 wikispaces 中的代码标签,因为它确实提高了不同颜色的清晰度。所以谢谢你。我也喜欢切换效果,我可以使用自己的超链接和 iframe 创建它,所以我希望它也适用于所有浏览器。

于 2013-05-22T00:44:51.020 回答