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