javascript - Why does not jQuery .attr() work in IE9?

The following code is just a bination of HTML, CSS and JavaScript "injected" to an existing iFrame ('iframe_id'). Although the following code works for Firefox, Chrome and Safari, it does not work in IE9. I checked some of the related and existing answers, and most of them are related to issues in IE8 or older, which does not help in this case. Is it something related to jQuery .attr()? Does IE9 have issues with it (like older IE versions)? If yes, how can I fix it?

$("#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=\".10.2/jquery.min.js\"><" + "/script>" +    
    "<script>"+
    "/*********** jQuery stuff here *****/"+
    "<" + "/script>"+     
    "</body>"+    
    "</html>"
    );

In IE9, I get the typical "The webpage cannot be displayed..." error.

I already reviewed the following answers, but that did not help.

Alternative for jQuery attr() in IE?

attr() not working in IE

jquery attr() do not work in 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./ajax/libs/jquery/1.10.2/jquery.min.js\"><" + "/script>" +    
    "<script>"+
    "/*********** jQuery stuff here *****/"+
    "<" + "/script>"+     
    "</body>"+    
    "</html>"
    );

In IE9, I get the typical "The webpage cannot be displayed..." error.

I already reviewed the following answers, but that did not help.

Alternative for jQuery attr() in IE?

attr() not working in IE

jquery attr() do not work in IE

Share Improve this question edited May 23, 2017 at 12:11 CommunityBot 11 silver badge asked Sep 3, 2013 at 19:28 Gandalf 9303 gold badges10 silver badges24 bronze badges

3 Its the data uri thats the problem see stackoverflow./questions/12791952/… – Musa Commented Sep 3, 2013 at 19:32
1 Pretty sure IE9 doesn't support data:text/html. caniuse./#feat=datauri – gen_Eric Commented Sep 3, 2013 at 19:33
Thanks for the links. So is there a way I can rewrite the above code, to make it work for IE9? – Gandalf Commented Sep 3, 2013 at 19:40
@Gandalf: You can make a blank iFrame, then use JavaScript to change its HTML. Check my answer. – gen_Eric Commented Sep 3, 2013 at 19:42
@Gandalf: Or, you know, use an HTML file. – gen_Eric Commented Sep 3, 2013 at 19:50

Add a ment |

5 Answers 5

Sorted by: Reset to default 5

For security reasons, data URIs are restricted to downloaded resources.
Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements.

MSDN

This goes for all versions of Internet Explorer.

To get it working, you can do:

var html = "<!DOCTYPE html>"+
    "<html>"+
    "<head>"+
    "<style>"+
    "/********** CSS stuff here **********/"+
    "</style>"+
    "</head>"+
    "<body>"+
    "<!--------- HTML stuff here ---------->"+
    "<script src=\"http://ajax.googleapis./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);

.attr() works fine, the issue is data:text/html. That doesn't work in IE.

From http://caniuse./#feat=datauri:

Support in Internet Explorer [8] is limited to images and linked resources like CSS files, not HTML files.

Instead you can create an iFrame, then edit its document's innerHTML:

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

Or, without jQuery

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

Or, you could just put the HTML in a file, and set the iframe to its url.

Dynamically modifying an iframe's src is a bad idea, and doesn't play nice with IE. Just create a new iframe element.

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

.attr() method is bogus in IE. (http://bugs.jquery./ticket/11071).

Find another way to show this HTML content in iframe

as this article states, in IE you should do the following:

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

i tried it with in my project, and it worked both in IE11 and Chrome.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Why does not jQuery .attr() work in IE9? - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)