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

StackOverflow https://stackoverflow.com/questions/18599996

Question

The following code is just a combination 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=\"http://ajax.googleapis.com/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

Was it helpful?

Solution

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.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);

OTHER TIPS

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

From http://caniuse.com/#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.com/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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top