body html of iframe - javascript

Hi my code returns all the html of the iframe. I would like just the body html. Any one know how to amend to suit?
Code:
alert( $("#uploaderIframe").contents()[0].documentElement.innerHTML );

var iframeHtml = $("#uploaderIframe").contents()[0].documentElement.innerHTML;
var bodyHtml = $(iframeHtml).find("body").html();
alert( bodyHtml );
.. probably creates a new DOM node from the innerHTML of the iFrame - I actually suspect that $(iframeHtml).find("body") is an empty jQuery object.
Try
var bodyHtml = $('#uploaderIframe').contents().find("body").html()
Ref: Traversing/contents

Try this:
iframeHtml = $("#uploaderIframe").contents()[0].documentElement.innerHTML;
bodyHtml = $(iframeHtml).find("body");

Related

how to remove an element in html string with jQuery

I have a Html String and I want to parse it to html and then remove any pre tags and it's children.
I tried this:
HTMLString = "<p>a paragraph</p><p>second Paragraph</p><pre><script> function (){ something(); }</script></pre>";
var $jQueryObject = $($.parseHTML(HTMLString));
alert($jQueryObject.find('pre').length);
but this alert me 0 that means it can't find any pre tag.
can anyone tell me what's wrong with my code?
this is my fiddle
HTMLString = "<p>a paragraph</p><p>second Paragraph</p><pre><script> function (){ something(); }</script></pre>";
var $jQueryObject = $($.parseHTML(HTMLString));
alert($jQueryObject.find('pre').length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
HTMLString = "<p>a paragraph</p><p>second Paragraph</p><pre><script> function (){ something(); }</script></pre>";
var $jQueryObject = $("<div/>").html(HTMLString);
console.log("Befor Remove tag: "+ $jQueryObject.find('pre').length);
$jQueryObject.find('pre').remove();
console.log("After Remove tag: "+ $jQueryObject.find('pre').length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
It's not working because <pre> is in root level of the string. For that case filter() works but it would not find another <pre> if it was nested inside another of your elements
Typically you want to insert the string into another container and use find() on that other container so you don't need to worry about nesting levels.
HTMLString = "<p>a paragraph</p><p>second Paragraph</p><pre><script> function (){ something(); }</script></pre>";
//changing your code to use `filter()`
var $jQueryObject = $($.parseHTML(HTMLString));
console.log('Filter length:', $jQueryObject.filter('pre').length)
// Using `find()` within another container
var $container = $('<div>').append(HTMLString);
console.log('Find length:', $container.find('pre').length)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
You need to create a DOM tree using your HTML string by appending to a DOM element, then you can use find() to get the pre tag element.
var HTMLString = "<p>a paragraph</p><p>second Paragraph</p><pre><script> function (){ something(); }</script></pre>";
var $jQueryObject = $('<div>').append($(HTMLString));
console.log($jQueryObject.find('pre').length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Convert string to html tags in Javascript

I want to convert the following string to HTML tags and place it inside my div.
<strong>asdfadfsafsd</strong>
I am using the following code to place it inside my div:
var message = "<strong>testmessage</strong&gt";
document.getElementById('message').innerHTML = bericht;
The problem is that I see the following in my div now:
<strong>testmessage</strong>
But I want to see:
testmessage
What is the problem?
var string = "<strong>asdfadfsafsd</strong>",
results = document.getElementById("results")
results.innerHTML = string;
results.innerHTML = results.textContent;
<div id="results"></div>
At first load the it as html. Then fetch it as text and then again load it as HTML :)
Refer HTML Entities
Try createElement
var tag = document.createElement("strong");
var t = document.createTextNode("testmessage");
tag.appendChild(t);
document.body.appendChild(tag);

Get class from <body> tag within HTML string

I have a string of HTML like this
var html = "<html><head></head><body class='getMe'></body></html>";
I want to get the body tags class and I tried doing that like this.
$(html).filter("body").attr("class")
$(html).find("body").attr("class");
But both methods return undefined. Any help?
You do not need to parse into html, rather try RegExp:
var html = "<html><head></head><body class='getMe'></body></html>";
var clazz = html.match(/body\sclass=['|"]([^'|"]*)['|"]/)[1]; //getMe
Here, String.match() gives array of string for given pattern.
body\sclass=['|"]([^'|"]*)['|"] gives ["body class='getMe'", "getMe"]. Using (), you can grab a particular group.
Also works with multiple classes and other attributes:
var html = "<html><head></head><body class='getMe hey there' id='xyz' bgcolor='red'></body></html>";
var clazz = html.match(/body\sclass=['|"]([^'|"]*)['|"]/)[1]; //getMe hey there
Edited
In order to get classes belonging to body tag starting with header-:
var html = "<html><head></head><body class='getMe header header-1 header-two test'></body></html>";
var headers = html.match(/body\sclass=['|"]([^'|"]*)['|"]/)[1].match(/(header\-\w+)/g);
//["header-1", "header-two"]
Try
var html = "<html><head></head><body class='getMe'></body></html>";
var className = $("<html />", {"html":html}).find("body")[0].className;
console.log(className);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
Did you try to put it in a Variable? find the tag without ""
var MyClass = $(body).attr("class");
// or $(html).find(body).attr("class");

Creating xml Document In javascript shows error

I am trying to create a xml document in Javascript. but it will not give required output
Here is my code
if(status==0)
{
var objXML = new ActiveXObject("Microsoft.XmlDOM")
objXML.async = false
var objXMLRoot=objXML.createElement("root")
objXML.documentElement=objXMLRoot
objXMLRoot.appendChild(objXML.createElement("parentname"))
objXMLRoot.appendChild(0).text=listid
objXMLRoot.appendChild(objXML.createElement("childname"))
objXMLRoot.appendChild(1).text=document.getElementById("childId").value;
objXMLRoot.appendChild(objXML.createElement("childstatus"))
objXMLRoot.appendChild(2).text=ichildid;
AjaxSend(objXMLRoot,'100','1');
}
My problem : i did't get any data in my xml document . i want to get listid,childid values in my xml document
any help will be appriciated
Their is some syntax error in your code
try something like below
if(status==0)
{
var objXML = new ActiveXObject("Microsoft.XmlDOM")
objXML.async = false
var objXMLRoot=objXML.createElement("root")
objXML.documentElement=objXMLRoot
objXMLRoot.appendChild(objXML.createElement("parentname"))
objXMLRoot.childNodes(0).text=listid
objXMLRoot.appendChild(objXML.createElement("childname"))
objXMLRoot.childNodes(1).text=document.getElementById("childId").value;
objXMLRoot.appendChild(objXML.createElement("childstatus"))
objXMLRoot.childNodes(2).text=ichildid;
AjaxSend(objXMLRoot,'100','1');
}

JavaScript substring from an element

This is some simple JavaScript code I would like to implement, butit does not work.
I'm trying to get the file link inside the tag file but I think innerHTML does not work in this kind of situation, but I've given it a shot to try.
Could you guys help me with this? I know I'm missing something here.
[videoplayer id="one" file="/dir1/dir2/hi.mp4" width="333" height="333" /]
<script type="text/javascript">
var str = document.getElementById('one').innerHTML;
document.write(str.substr(0,str.length-1));
</script>
Use getAttribute() to retrieve the value of the file attribute.
var str = document.getElementById('one').getAttribute('file');
alert( str );
Probably a good idea to also make sure the element was found:
var el = document.getElementById('one');
if( el ) {
alert( 'Element was found!' );
var str = el.getAttribute('file');
} else {
alert( 'NO element was found' );
}
alert( str );
You use the getAttribute function:
var str = document.getElementById('one').getAttribute('file');
innerHTML only works if there is HTML code inside of the tags:
<foo>
Hello!
</foo>
But that is not the case for you.

Categories

Resources