IE8 iframe将简单的文本文件呈现为HTML,我需要原始代码

IE8 iframe renders simple text file as HTML , I need raw code

本文关键字:HTML 代码 原始 简单 iframe 文本 文件 IE8      更新时间:2023-09-26

我有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中工作

你提供的链接(mrsbos.wikispaces.com/file/view/guessNumber.txt)有text/plain作为内容类型,所以一个ok。

要找出内容类型,您可以使用Fiddler或简单地右键单击页面并选择页面信息或类似的东西(取决于浏览器)。

我的猜测是IE试图智能自动检测内容,看到<script>标记并假设它是html。

在这些情况下,您将不得不对内容进行编码,如果可能的话,可以选择呈现一个html页面,而不是来自服务器的源代码在<pre>标记中。

Content-Type HTTP报头表示资源(网页、图片、下载)的MIME类型。对于HTML页面,MIME类型通常是text/html,对于文本文件,MIME类型通常是text/plain

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

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

在wikisspaces上,使用提供的源代码格式化功能(参见wikittext帮助页)可能是有意义的:

[[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;
}

这个问题已经存在了一段时间,不幸的是没有真正正确的修复。有一件事可能会起作用,那就是使用Javascript将iframe中的所有内容都用<pre>标签包装起来,但这有点hack。

关于这个问题的更多信息请访问www.howtocreate.co.uk,我将在这里复制文章的主体:

当我们讨论内容类型的HTTP报头时,XHTML是并不是IE唯一出错的地方。它甚至可以处理纯文本不正确。如果你发送一个头,说你正在使用plain文本,但它包含一些IE认为是HTML的东西,它将忽略您的标题,并将其呈现为HTML。所以你的文本文件精心准备的被转换成一个磨合的段落几乎无法读取,位丢失,格式丢失。

他们为什么要这么做?因为有时候,HTML页面是不正确的由web服务器以纯文本形式提供。如果那样的话,这个也会让IE将其呈现为HTML。这听起来是个好主意,但这意思是制作这些页面的作者没有意识到他们的页面被错误地作为文本提供,因为当他们检查它时在IE中,它看起来是工作的。正确遵从的浏览器使用页面指定的内容类型将看到页面源而不是它的内容。而且,这也意味着许多文本文件因为IE认为它们是HTML,所以被错误地修改了。

不管怎样,总有人吃亏。但是如果IE没有忽略文本内容类型的头,作者就会意识到有问题,并且而是修复服务器。该页面可以在所有浏览器和IE中工作不会搞砸文本文件。

我现在使用了您建议的turnToText函数。起初,结果只显示纯文本形式的HTML标记,而不显示脚本。显然,浏览器已经将脚本标记及其内容放在了head标记中。所以我可以把它们拉出来并添加到剩下的代码中。函数现在是这样的。我只需要给结果一个更好的布局,通过添加非白色换行符等。

    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:");
    }
    }

thanks a lot

顺便说一下,我还将利用wikisspaces中的代码标记,因为它确实通过不同的颜色提高了清晰度。所以谢谢你。我也喜欢切换效果,我可以用我自己的超链接和iframe创建,所以我希望它也能在所有浏览器上工作。