为什么 jQuery .attr() 在 IE9 中不起作用？答案

【问题标题】：Why does not jQuery .attr() work in IE9?为什么 jQuery .attr() 在 IE9 中不起作用？
【发布时间】：2013-09-07 03:26:27
【问题描述】：

以下代码只是“注入”到现有 iFrame ('iframe_id') 的 HTML、CSS 和 JavaScript 的组合。尽管以下代码适用于 Firefox、Chrome 和 Safari，但它不适用于 IE9。我检查了一些相关的和现有的答案，其中大多数与 IE8 或更早版本中的问题有关，这在这种情况下没有帮助。它与 jQuery .attr() 有关吗？ IE9 是否存在问题（如旧 IE 版本）？如果是，我该如何解决？

$("#iframe_id").attr(
    "src", "data:text/html;charset=utf-8," + 
    "<!DOCTYPE html>"+
    "<html>"+
    "<head>"+
    "<style>"+
    "/********** CSS stuff here **********/"+
    "</style>"+
    "</head>"+
    "<body>"+
    "<!--------- HTML stuff here ---------->"+
    "<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"><" + "/script>" +    
    "<script>"+
    "/*********** jQuery stuff here *****/"+
    "<" + "/script>"+     
    "</body>"+    
    "</html>"
    );

在 IE9 中，我收到典型的“无法显示网页...”错误。

我已经查看了以下答案，但这没有帮助。

Alternative for jQuery attr() in IE?

attr() not working in IE

jquery attr() do not work in IE

【问题讨论】：

数据 uri 就是问题所在，请参阅stackoverflow.com/questions/12791952/…
可以肯定 IE9 不支持data:text/html。 caniuse.com/#feat=datauri
感谢您的链接。那么有没有办法可以重写上面的代码，使其适用于 IE9？
@Gandalf：您可以制作一个空白 iFrame，然后使用 JavaScript 更改其 HTML。检查我的答案。
@Gandalf：或者，你知道，使用 HTML 文件。

标签： javascript jquery html css data-uri

【解决方案1】：

动态修改 iframe 的 src 是个坏主意，而且与 IE 不兼容。只需创建一个新的 iframe 元素。

$('body').append('<iframe src=""></iframe>');

【讨论】：

无论如何，他可能需要与document.domain 打交道。我记得我们正在使用内联 document.write 和动态创建的 iframe 进行破解，以使其在所有浏览器中都能正常工作。

【解决方案2】：

出于安全原因，数据 URI 仅限于下载的资源。
数据 URI 不能用于导航、脚本、或填充框架或 iframe 元素。

MSDN

这适用于所有版本的 Internet Explorer。

要让它工作，你可以这样做：

var html = "<!DOCTYPE html>"+
    "<html>"+
    "<head>"+
    "<style>"+
    "/********** CSS stuff here **********/"+
    "</style>"+
    "</head>"+
    "<body>"+
    "<!--------- HTML stuff here ---------->"+
    "<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"><" + "/script>" +    
    "<script>"+
    "/*********** jQuery stuff here *****/"+
    "<" + "/script>"+     
    "</body>"+    
    "</html>";

var frame = document.getElementById('iframe_id');
frame.contentWindow.document.write(html);

【讨论】：

不幸的是，这似乎不起作用。这是一个 [演示] (jsfiddle.net/Jqtv7)。出于某种原因，jQuery 没有被“注入”到实际的 iFrame 中（我认为..）。这是基于W3Schools jQuery example

【解决方案3】：

.attr() 工作正常，问题是data:text/html。这在 IE 中不起作用。

来自http://caniuse.com/#feat=datauri：

Internet Explorer [8] 中的支持仅限于图像和链接资源，例如 CSS 文件，而不是 HTML 文件。

您可以创建一个 iFrame，然后编辑其document 的innerHTML：

$("#iframe_id").contents().find('html').html('<div>test</test>');

或者，没有 jQuery

document.getElementById('iframe_id').contentWindow.document.body.innerHTML = '<div>test</test>';

或者，您可以将 HTML 放在一个文件中，并将 iframe 设置为其 url。

【讨论】：

嗨，火箭。感谢您的回复。但是，它似乎不起作用。这是我正在尝试做的事情：jsfiddle.net/vfsYv。这基于以下W3Schools.com 示例。
你的 jsFiddle 选择了 jQuery 2。用 jQuery 1.9 试试。 jsfiddle.net/vfsYv/3
为什么需要使用JavaScript来设置iframe的HTML？为什么不使用 HTML 文件和 src 属性？
其实我是这么想的。但是，iFrame 会针对 HTML、CSS 或 JavaScript 中的任何击键更改实时更新。想想……比如说，jsBin.com，只是有点不同。每次按下按键时读取外部文件会使 Web 应用过于依赖服务器端。
出于某种原因，在 iFrame 内部，$ 和 document 指的是父级，而不是 iFrame。

【解决方案4】：

.attr() 方法在 IE 中是伪造的。 (http://bugs.jquery.com/ticket/11071)。

寻找在 iframe 中显示此 HTML 内容的另一种方式

【讨论】：

"已关闭的错误：无效"

【解决方案5】：

正如this article 所说，在 IE 中您应该执行以下操作：

iframe.contentWindow.contents = yourHtmlString;
iframe.src = 'javascript:window["contents"]';

我在我的项目中尝试过，它在 IE11 和 Chrome 中都有效。

【讨论】：