Here's my Java script code. I want to display my HTML string which is stored in content, I want this to be displayed in the iframe instead it displaying from the src url.
How do I do it.
Code:
if ($("#wikiframe").length == 0) {
var s = "";
s = getSelText();
var content = "<html>" + s + "</html>";
if (s == "") {
var s = prompt("Forget something?");
}
if ((s != "") && (s != null)) {
$("body").append("\
<div id='wikiframe'>\
<div id='wikiframe_veil' style=''>\
<p>Loading...</p>\
</div>\
<iframe src='???' onload=\"$('#wikiframe iframe').slideDown(500);\">Enable iFrames.</iframe>\
<style type='text/css'>\
#wikiframe_veil { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(255,255,255,.25); cursor: pointer; z-index: 900; }\
#wikiframe_veil p { color: black; font: normal normal bold 20px/20px Helvetica, sans-serif; position: absolute; top: 50%; left: 50%; width: 10em; margin: -10px auto 0 -5em; text-align: center; }\
#wikiframe iframe { display: none; position: fixed; top: 10%; left: 10%; width: 80%; height: 80%; z-index: 999; border: 10px solid rgba(0,0,0,.5); margin: -5px 0 0 -5px; }\
</style>\
</div>");
$("#wikiframe_veil").fadeIn(750);
}
}
getSelText would get the string and then I am appending it with <html> and <\html>.
I want this Html code in content to be displayed in the iframe.
How do I do it.
UPDATE:
Please check this JS Fiddle link : I can't figure out why its not working . Added changes as suggested by @mathew.
Here's my Java script code. I want to display my HTML string which is stored in content, I want this to be displayed in the iframe instead it displaying from the src url.
How do I do it.
Code:
if ($("#wikiframe").length == 0) {
var s = "";
s = getSelText();
var content = "<html>" + s + "</html>";
if (s == "") {
var s = prompt("Forget something?");
}
if ((s != "") && (s != null)) {
$("body").append("\
<div id='wikiframe'>\
<div id='wikiframe_veil' style=''>\
<p>Loading...</p>\
</div>\
<iframe src='???' onload=\"$('#wikiframe iframe').slideDown(500);\">Enable iFrames.</iframe>\
<style type='text/css'>\
#wikiframe_veil { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(255,255,255,.25); cursor: pointer; z-index: 900; }\
#wikiframe_veil p { color: black; font: normal normal bold 20px/20px Helvetica, sans-serif; position: absolute; top: 50%; left: 50%; width: 10em; margin: -10px auto 0 -5em; text-align: center; }\
#wikiframe iframe { display: none; position: fixed; top: 10%; left: 10%; width: 80%; height: 80%; z-index: 999; border: 10px solid rgba(0,0,0,.5); margin: -5px 0 0 -5px; }\
</style>\
</div>");
$("#wikiframe_veil").fadeIn(750);
}
}
getSelText would get the string and then I am appending it with <html> and <\html>.
I want this Html code in content to be displayed in the iframe.
How do I do it.
UPDATE:
Please check this JS Fiddle link : I can't figure out why its not working . Added changes as suggested by @mathew.
Share Improve this question edited Dec 1, 2013 at 15:40 rahul888 asked Dec 1, 2013 at 14:20 rahul888rahul888 4132 gold badges9 silver badges18 bronze badges4 Answers
Reset to default 4Put your code as data:uri onto src attribute:
http://en.wikipedia/wiki/Data_URI_scheme
Expanding on eRIZ's answer, if you have a string of html content "htmlString" and an iframe with the id of "wikiframe" you can inject the HTML code with the following snippet:
$('#wikiframe').attr('src','data:text/html;charset=utf-8,' + encodeURIComponent(htmlString));
You can use usual jquery functions on iframe's document.
$("body").append("<iframe id='wikiframe'></iframe>");
var s = getSelText();
$("#wikiframe").contents().find('body').append(s);
As far as I know, any html content you append to an iframe gets displayed when the iframe is NOT supported by the browser