I have two html files Editor.html and Test.html. I want to get the source code of Test.html file into a content editable div in Editor.html. Can I do this simply using java script?
I have two html files Editor.html and Test.html. I want to get the source code of Test.html file into a content editable div in Editor.html. Can I do this simply using java script?
Share Improve this question edited May 22, 2012 at 5:16 user1408470 asked May 21, 2012 at 17:48 user1408470user1408470 1,5153 gold badges16 silver badges21 bronze badges 1- I found a solution using HTML5 FileReader API with javascript. dotnetobject./… Thanks for the replies.. – user1408470 Commented May 22, 2012 at 17:19
4 Answers
Reset to default 1I would try to use iframes in that case. You can pletely get the iframe content with window.frames:
window.frames['iframe_name'].document.getElementById('div_in_iframe');
and you can replace the content of like usually.
via ajax.
the jquery library makes light work of ajax
<script src="/jquery.min.js"></script>
<div id="myeditable" contenteditable="true"></div>
<script type="text/javascript">
/* the simplest method in the library */
$("#myeditable").load("/test.html");
</script>
There are other great javascript shorthand libraries too like prototype
Something like this bined with whatever formatting you would like should do it. That is if you're looking for a way to write code and then click the button to pass the content to the iframe to see what es out.
<html>
<head><title>Test</title></head>
<script>
function writer()
{
var page = document.getElementById('box').value
document.getElementById('realbox').contentWindow.document.body.innerHTML = page
}
</script>
<body>
<textarea rows ="50%" cols="100%" id='editbox'></textarea>
<iframe style="background-color: red;" id='realbox' height="100%" width="100%">/iframe>
<input type="button" onclick="writer()" value="write">
</body>
</html>
You can use an iframe to load the webpage and then get its HTML code using javascript
<iframe src="test.html" style="display:none;" name="myFrame">
</iframe>
<textarea id="result"></textarea>
and javascript is
<script>
var frame = window.frames["myFrame"].document;
var data = frame.getElementsByTagName('html')[0].innerHTML;
document.getElementById("result").innerHTML = data;
</script>
This code will help to get all the HTML codes inside the tag of your HTML file (In this case test.html).
But it will not print the tag itself so to do so use:
document.getElementById("result").innerHTML = "<HTML>"+data"</HTML>";
But I remend to use AJAX if possible by using Jquery Library.