Question

以下代码只是“注入”现有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

Answer 1

出于安全原因，数据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);

Answer 2

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

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

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

相反，您可以创建iFrame，然后编辑其document的{{1}}：

innerHTML

或者，没有jQuery

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

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

Answer 3

动态修改iframe的src是一个坏主意，并且对IE不起作用。只需创建一个新的iframe元素。

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

Answer 4

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

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

Answer 5

作为this article状态，在IE中您应该执行以下操作：

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

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

为什么jQuery .attr（）在IE9中不起作用？

5 个答案: