3

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

Improve this question
5
  • 3
    Its the data uri thats the problem see stackoverflow.com/questions/12791952/… Commented Sep 3, 2013 at 19:32
  • 1
    Pretty sure IE9 doesn't support data:text/html. caniuse.com/#feat=datauri 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? Commented Sep 3, 2013 at 19:40
  • @Gandalf: You can make a blank iFrame, then use JavaScript to change its HTML. Check my answer. Commented Sep 3, 2013 at 19:42
  • @Gandalf: Or, you know, use an HTML file. Commented Sep 3, 2013 at 19:50

5 Answers 5

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.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);
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Unfortunately, that does not seem to work. Here's a [demo] (jsfiddle.net/Jqtv7). For some reason, the jQuery does not get "injected" to the actual iFrame (I think..). This is based on the W3Schools jQuery example
3

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

Improve this answer

6 Comments

Hi Rocket. Thanks for the response. However, it does not seem to work. Here's a fiddle of what I am trying to do: jsfiddle.net/vfsYv . This is based on the following W3Schools.com example.
Your jsFiddle had jQuery 2 selected. Try it with jQuery 1.9. jsfiddle.net/vfsYv/3
Why do you need to use JavaScript to set the iframe's HTML? Why not use an HTML file and the src attribute?
Actually, I thought of that. However, the iFrame is updated in real-time for any key-stroke changes in the HTML, CSS or JavaScript. Think something like...say, jsBin.com, only a little different. Reading an external file for every keystroke pressed will make the web app too server-side dependent.
For some reason, inside the iFrame, $, and document are referring to the parent, not the iFrame.
|
0

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>');
Improve this answer

1 Comment

He may need to mess with document.domain anyway. I remember we were hacking aroud with inline document.write with dynamically created iframes in order to make it work in all browsers.
0

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

Find another way to show this HTML content in iframe

Improve this answer

1 Comment

"closed bug: invalid"
0

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.