3

以下代码只是“注入”到现有 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 中，我收到典型的“无法显示网页...”错误。

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

IE 中 jQuery attr() 的替代方案？

attr() 在 IE 中不起作用

jquery attr() 在 IE 中不起作用

4

5 回答 5

5

出于安全原因，数据 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);
于 2013-09-03T19:34:08.173 回答
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。

于 2013-09-03T19:34:33.900 回答
0

动态修改 iframe 的 src 是个坏主意，并且在 IE 中效果不佳。只需创建一个新的 iframe 元素。

$('body').append('<iframe src=""></iframe>');
于 2013-09-03T19:31:25.720 回答
0

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

找到另一种在 iframe 中显示此 HTML 内容的方法

于 2013-09-03T19:35:27.340 回答
0

正如本文所述，在 IE 中您应该执行以下操作：

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

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

于 2014-01-30T15:58:03.643 回答