I want to display my html string in this iFrame.
Actually I am confused whether it should be displayed in iFrame or Div.
Code:
$("body").append("\
<div id='wikiframe'>\
<div id='wikiframe_veil' style=''>\
<p>Loading...</p>\
</div>\
<iframe id='wikiIDframe'></iframe>\
</div>"
);
I want to display HTML which is in a string s="<body>....</body>
In this iFrame how do I Do it. Could any body help me with that.
You can append your string s to your iframe by doing the following:
jQuery
var s = '<body><div>hello</div></body>'; // example s string
var textBody = $(s); // make s into jquery object
var iframeBody = $('#wikiIDframe').contents().find('body'); // get the body from the iframe
iframeBody.append(textBody.html()); //append s html into iframe
Example
An iframe is used to embed another document within the current HTML document.Which means if you want see a webpage inside a webpage, u can use iframe.
<iframe src="http://www.stackoverflow.com"></iframe>
see this example http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe
If you want to display your text then use a div instead.In jquery you can use it like the below code
$("#your_div_id").html("yourstring here");
Has anyone thought about this?
HTML
<iframe id="iframe" style="width:500px;height:400px;"></iframe>
JS
var myHTML = "<div id='wikiframe'><div id='wikiframe_veil' style=''><p>Loading...</p></div><iframe id='wikiIDframe'></iframe></div>";
document.getElementById('iframe').src = 'data:text/html,<html><body>' + myHTML + '</body></html>';
Try it on http://jsfiddle.net/Kqd8R/1/
Related
I'm a beginner at HTML and JavaScript. And trying to encode a HTML file to Base64 code and then put that encoded string into <iframe src=" ENCODED STRING HERE" from another HTML file.
What I'm trying to do here is put encoded string into popup iframe like below capture to make it visible,
var i_frame_98c3be4abbe943db99555415352b65f5 = $('<iframe src="ENCODED STRING FROM HTML FILE" width="500" style="border:none !important;" height="300"></iframe>')[0];
However, I don't know how to.
I know there is encode/decode website base64encode.org but I have to do it by hand. I want to make it be encoded directly and put the code in the iframe src when I open up the file.
Is there any ideas or functionality in html to encode directly?
p.s. I can edit to upload html code if you want to see.
https://www.w3schools.com/jsref/jsref_encodeURI.asp has a good reference to encode URI.
I will also to checkout the solution here to set the src value of the iframe : dynamically set iframe src
Demo jsfiddle: https://jsfiddle.net/np7hp5jo/1/
function appendHtml(el, str) {
var div = document.createElement('div');
div.innerHTML = str;
while (div.children.length > 0) {
el.appendChild(div.children[0]);
}
}
var encodedUrl = encodeURI('https://www.lifehacker.com.au/?r=US');
var html = '<iframe id="myIframe" src="'+encodedUrl+'" onLoad="iframeDidLoad();"></iframe>';
appendHtml(document.body, html); // "body" has two more children - h1 and span.
Happy learning.
Hello Experts I need help
I'm using dojo Dijit Editor "rich text editor" field in my widget, on page load I fetch HTML text from database and I set the rich text editor with the HTML normally, Then user can edit the displayed text and on page close I have to set the field in database with the source HTML of the edited text by user
the problem is when I do the following "myDB_txt=myEditor.getValue();" getValue() doesn't return the complete HTML code it removes HTML tag and header tag and body tag which causes me troubles.
Simply use myEditorWidget.get("Value") where myEditorWidget refer to your dijit/Editor indtance
To wrap this result you can define a function that return result wraped by html tags
wrapResult(myEditor.get("value")));
function wrapResult(html) {
return "<html> <head></head> <body>"+html+"</body></html>";
}
Here is a Sample with wraped result Fiddle .
Otherwise If you want to get the whole HTML enclosing the content dijit ,
you will get access to it's Iframe ( that has the id="editor_iframe")
and then get get the html document of this last like bellow (here you should import dojo/query package)
query("#editor_iframe")[0].contentDocument.documentElement.outerHTML
Here is another Fiddle .
You could try the following to retrieve the value from your dijit/Editor instance.
var content = myEditor.attr("value");
var openTags = '<html><head></head><body>';
var closeTags = '</body></html>';
var html = openTags + content + closeTags; // use this
or
var htmlWrapper = function(content){
return '<html><head></head><body>' + content + '</body></html>';
};
var html = htmlWrapper(myEditor.attr("value"));
I have two pages on the same domain. Home.html and page2.html are their names.
home.html has the following content
<html>
<iframe id="one" src="page2.html" style="display:none"></iframe>
<div id="container">
<h1>Title of Page</h1>
<div id="ShowHere"></div>
</div>
</html>
page2.html has the following content.
<html>
<div id="container">
<span id="target">Some Text</span>
</div>
<span>Don't Show This Text</span>
</html>
I would like to use some javascript to get the contents of "target" from within the iframe with Id="one" on the page home.html and then change the innerhtml of the element id=ShowHere to show the html within the element "target" such that, it shows the words "Some Text" under the word "Title of Page".
I think that the following is a start, put at the bottom of home.html:
<script>
var frameSource = document.getElementById("one").contentWindow.document.documentElement.outerHTML;
// ANSWER TO MY QUESTION
document.getElementById("ShowHere").innerHTML = frameSource;
</script>
I've searched around and seen a few answers that supposedly do this, but none which provide a meaningful explanation of HOW to do this, and none which I can get to work. I'd prefer to use plain vanilla javascript, but Jquery is alright too.
Based on what I am trying to do, which is get the content (i.e. innerhtml) of a div from another page on the same domain, I wonder if there is a better approach than creating an invisible iframe and then reading it. Answers which achieve the desired result, but through another mechanism are also welcome.
Using the answer for this question
So, firstly you have to find the iframe:
var iframe = document.getElementById('one');
Then you should get the iframe contents:
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
And now you can use getElementById to find DOM-elements in the iframe:
var iframeContent;
if (iframeDocument) {
iframeContent = iframeDocument.getElementById('target').innerHTML;
}
Now in the iframeContent you have the contents of span you need to show on the main page, so you can just find element where you want to display iframeContent and set the innerHTML property:
var divToShow = document.getElementById('ShowHere');
divToShow.innerHTML = iframeContent;
And that's all.
I hope my answer will help you to solve your problem.
Thanks : )
You can use selectors (like getElementById, etc) in iframes similar to those found in your normal window via iframe.contentWindow.document.
So if you wanted to get the contents of target on the second page, you can get it via document.getElementById("one").contentWindow.document.getElementById("target")
Edit:
You also probably should wait until the iframe is loaded before trying to read elements from it. So altogether:
var init = function(){
var frameDocument = document.getElementById("one").contentWindow.document;
document.getElementById("ShowHere").innerHTML = frameDocument.getElementById("target").innerHTML;
};
if(document.getElementById("one").contentWindow.document.getElementById("target")) { // iframe is loaded
init();
} else {
document.getElementById("one").contentWindow.onload = init;
}
<div id="test1"><div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
</script>
<fb:comments href="http://www.jewelryfresh.com/" num_posts="10" width="739"></fb:comments></div>
Above is the code for facebook comments box. I want to dynamically change the href value to the page on which it is. How can i do it.I do not want the static href value to the page on which it is. How can i do it.I do not want the static href value as it is now. Please help.
You can use div and then dynamically create its contents with the innerHTML method in JavaScript
where it will be your fb:comments tag. You can get the current page with document.location.href.
After you create the fb:comments tag dynamically and render it inside the div, you need to reparse its contents so the XFBML is interpreted. You can do it with the FB.XFBML.parse(YOUR_DIV) method.
Hope this helps.
var mydiv = document.getElementById("mydiv");
mydiv.innerHTML = "<fb:comments href='" + document.location.href + "' num_posts='10' width='739'></fb:comments>";
FB.XFBML.parse(mydiv);
I have page with html something like this
<body><iframe ></iframe><div id="menu">......</div>.....</body>
I want to get the innerHTML of the body but without the iframe? How can i do that in jquery?
Try with .clone:
$(document.body)
.clone()
.find('iframe')
.remove()
.end()
.html();
$(document).ready(function(){
$('body').not('iframe').html();
});
that should get everything in the body but the iframe. you'll probably want to store that in a variable or something for reference later
I have found another way to do it
var page = $('body').html();
page = $('<div>' + page + '</div>');
var html = $(page).find('iframe').remove().end().html();
html variable contains the html without the iframe.
And it works with IE, since jquery.clone() did not work on my page may be because of malformed html as #lonesomeday suggestted