Is there something like simple_html_dom.php for JavaScript? - javascript

I'm building an iPhone app using Appcelerator Titanium, and I need to convert a HTML string (which may contain invalid HTML like missing tags, not my fault) to a DOM object. In this DOM element I need to find a specific <div>, and put the contents of this <div> in a WebView.
Anyway, I am looking for something like the Simple HTML DOM script, which is for PHP, to search through the DOM for this <div>. I'd like the script to scan the (invalid) HTML string, and get the innerHTML of the <div>.
How can I best do this in JavaScript?

The code below is the basic string-to-DOM convertor. See the linked answer for a detailed explanation.
function string2dom(html, callback){
/* Create an IFrame */
var iframe = document.createElement("iframe");
iframe.style.display = "none";
document.body.appendChild(iframe);
var doc = iframe.contentDocument || iframe.contentWindow.document;
doc.open();
doc.write(html);
doc.close();
function destroy(){
iframe.parentNode.removeChild(iframe);
}
if(callback) callback(doc, destroy);
else return {"doc": doc, "destroy": destroy};
}
This code snippet does not sanitise the HTML. Scripts will be executed, external sources will be loaded. The explanation of the code, and HTML sanitiser can be found at this answer
Usage (examples), Fiddle: http://jsfiddle.net/JFSKe/:
string2dom("<html><head><title>Test</title></head></html>", function(doc, destroy){
alert(doc.title); /* Alert: "Test" */
destroy();
});
var test = string2dom("<div id='secret'></div>");
alert(test.doc.getElementById("secret").tagName); /* Alert: "DIV" */
test.destroy();

Related

How to clone existing document in javascript?

Is it possible to create a copy variable of document in javascript?
As I am a C# developer I want something like
var doc=new document();
var doc = document;
doc.open('application/txt', 'replace');
doc.charset = 'utf-8';
doc.write('Message to write in txt file');
doc.close();
if (doc.execCommand('SaveAs', true,'test.txt')) {
alert(success);
}
I have one button and some other controls in the iframe popup where i want to open saveas dialog onclick of button. After i run the above code 'Message to write in txt file' is showing in the page where i have my button and other controls
I have resolved this issue like below. I have added a iframe in my page and did the below.
var iframe = document.getElementById('iframe');
var doc = iframe.contentDocument;
var message = 'Message to write in txt file';
doc.open('application/txt', 'replace');
doc.charset = 'utf-8';
doc.write(message);
doc.close();
doc.execCommand('SaveAs', true, 'test.txt');
You can use the clone method in JQuery http://api.jquery.com/clone/
The .clone() method performs a deep copy of the set of matched
elements, meaning that it copies the matched elements as well as all
of their descendant elements and text nodes. When used in conjunction
with one of the insertion methods, .clone() is a convenient way to
duplicate elements on a page.

append element in head of an iframe using jquery

i want to append a style sheet(css) link to the head of an iframe using jquery .
i tried with the following code but not working.
$('#tabsFrame').contents().find("head").append(cssLink);
i am used to append data to an iframe by using this line of code
$('body', window.frames[target].document).append(data);
In your case, this line would look like this
$('head', window.frames['tabsFrame'].document).append(cssLink);
EDIT:
Add <head></head> to the iframe and change your var cssLink to
cssLink = '<link href="cupertino_1.4/css/cupertino/jquery-ui-1.8.7.custom.css" type="text/css" rel="Stylesheet" class="ui-theme" />
well, you can check with this:
$('#tabsFrame').contents().find("head")[0].appendChild(cssLink);
I believe you can't manipulate the content of an iframe because of security.
Having you be able to do such a thing would make cross-site-scripting too easy.
The iframe is totally seperate from the DOM of your page.
Also, java and javascript are two completely different things!
Follow the Link to see the difference here
This could be related to IE not allowing you to add elements in the DOM, check out the clever solution here
EDIT:
Thanks #kris, good advice to add more info in case links break:
Here is the main code snippet from the link, in case it goes out again.
(This is only needed with some IE version, for the most part, the other answer work just fine)
var ifrm;
//attempts to retrieve the IFrame document
function addElementToFrame(newStyle) {
if (typeof ifrm == "undefined") {
ifrm = document.getElementById('previewFrame');
if (ifrm.contentWindow) {
ifrm = ifrm.contentWindow;
} else {
if (ifrm.contentDocument.document) {
ifrm = ifrm.contentDocument.document;
} else {
ifrm = ifrm.contentDocument;
}
}
}
//Now that we have the document, look for an existing style tag
var tag = ifrm.document.getElementById("tempTag");
//if you need to replace the existing tag, we first need to remove it
if (typeof tag != "undefined" || tag != null) {
$("#tempTag", ifrm.document).remove();
}
//add a new style tag
$("HEAD", ifrm.document).append("");
}

Javascript function that returns a DOM when input is html content

I want a Javascript function that returns a correct DOM when input is HTML content.
I have used the follwing function for the same. Here input is HTML content and output is DOM.
function htmltoelement(elementHTML)
{
var temDiv = document.createElement('div');
temDiv.innerHTML = elementHTML;
return temDiv;
}
This function works well for Firefox, but not for IE or Chrome, when the HTML is broken.
I need a suggestion for a function that works fine on all the browsers even when HTML is broken.
With "broken" HTML (which I am assuming is invalid) the way it is interpreted is largely up to the browser and the mode that the browser is in. The DOCTYPE at the top will dictate how the innerHTML property is parsed when it is set. For XHTML, it will give you some odd results because "broken" HTML will mess up your entire page. The function you are using is correct, but it seems you need to check your input for compliance before attempting to create the div.
You can achieve this by writing it out to a hidden iframe:
<iframe id="frame" style="display:none"></iframe>
<script type="text/javascript">
function htmltoelement(elementHTML)
{
var temp = document.getElementById('frame');
// Cross-browser way to get the iframe document
var idoc = (temp.contentWindow || temp.contentDocument);
if (idoc && idoc.document) idoc = idoc.document;
// Put the HTML in the iframe
idoc.write("<html><body>" + elementHTML + "</body></html>");
temDiv = document.createElement('div');
temDiv.innerHTML = idoc.body.innerHTML;
return temDiv;
}
document.body.appendChild(htmltoelement('<b><i>hi</b></i>'));
</script>
The hidden IFRAME seems to be necessary, document.createElement('iframe') didn't work in Opera.

Filling an IFRAME with dynamic content from JavaScript

I have an IFRAME that should be filled with content from JavaScript. Had the content be on the server all I had to do is:
function onIFrameFill() {
myIframe.location.href = "HelloWorld.html";
}
But the content I have is a HTML page generated on the client and represented as a string (I have not much influence on it). How can I populate the content of the my iframe programatically?
I think you're looking for something like:
var iframeDoc = myIframe.contentWindow.document;
iframeDoc.open();
iframeDoc.write('hello world');
iframeDoc.close();
Tried setting .innerHTML but that does not work. Solution by Jeffery To works. Just want to add that myIframe.contentWindow might not work in old browsers (read IE old versions) so you can do
var iFrameWindow = myIframe.contentWindow || myIframe.documentWindow;
var iFrameDoc = iFrameWindow.document;
then use the document open(), write() & close() as above.
What about .innerHTML?
myIframe.innerHTML = "This is some HTML <b>text</b>";
Similar to Jeffry but using contentDocument instead.
let iframe = document.querySelector('iframe');
let doc = iframe.contentDocument;
doc.open();
doc.write('Hello world!');
doc.close();

How to clear the contents of the openwysiwyg editor?

I am using the openwysiwyg editor in my webpage. I want to clear the contents of it. I have used
$('#report').val('');
but that doesn't clear it.
The editor creates an iframe and updates the contents there, syncing as it goes.
How would I go about clearing it?
You probably need to supply a bit more information - the html itself would be very useful, but I'm going to assume that report is the id of the textarea you need cleared.
If it's a normal textarea, your code should really work.
If (as Paulo mentions in the comments) it's being modified by an openwysiwyg editor, it's probably being turned into an iFrame with it's own HTML page in it. It's a lot more difficult to manipulate the iFrame.
Looks like that's the case.
Have a look at this example to see if it helps you reference the iFrame itself: http://www.bennadel.com/index.cfm?dax=blog:1592.view
This is a hacked excerpt of the example.html that comes with openwysiwyg:
<script type="text/javascript">
// Use it to attach the editor to all textareas with full featured setup
//WYSIWYG.attach('all', full);
// Use it to attach the editor directly to a defined textarea
WYSIWYG.attach('textarea1'); // default setup
WYSIWYG.attach('textarea2', full); // full featured setup
WYSIWYG.attach('textarea3', small); // small setup
// Use it to display an iframes instead of a textareas
//WYSIWYG.display('all', full);
function getIFrameDocument( id )
{
var iframe = document.getElementById(id);
if (iframe.contentDocument) {
// For NS6
return iframe.contentDocument;
} else if (iframe.contentWindow) {
// For IE5.5 and IE6
return iframe.contentWindow.document;
} else if (iframe.document) {
// For IE5
return iframe.document;
} else {
return null;
}
}
function clearcontents()
{
getIFrameDocument('wysiwygtextarea1').body.innerHTML = '';
}
</script>
Then somewhere in the page, I've got a clear button (actually div):
<div style="width:120px;height:20px;background:#ff0000;text-align:center;display:block;" onclick="clearcontents();">Clear!</div>
Note that the id of your textarea is prefixed with wysiwyg. That's the name of the iFrame.
I've tested this in Firefox but nothing else at the moment. The code for getting the iFrame I found on the Net somewhere, so hopefully it works for other browsers :)
This works, but is butt ugly:
var frame = WYSIWYG.getEditor('--ENTER EDITOR NAME HERE--');
var doc = frame.contentWindow.document;
var $body = $('html',doc);
$body.html('');
Replace --ENTER EDITOR NAME HERE-- by whatever you pass to the editor when you call attach.
I believe this works
$('#report').text('');

Categories