How to get all html string from iframe? - javascript

Assume i have iframe contain sample.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="import" href="sample.html">
</head>
<body>
<p>top</p>
<iframe src="sample.html" frameborder="0" id="myframe"></iframe>
<p>bottom</p>
<textarea cols="30" rows="10"></textarea>
</body>
</html>
I want to get all content include <!DOCTYPE html> ...</html>. I try to search arround the web but what i found only get content from body using
var cont = document.getElementById('myframe').contentWindow.document;
console.log(cont.body);
I don't want to use AJAX to get content file.
How to get ALL content from iframe include html tag?


Try accessing cont.documentElement.innerHTML to get the contents of <html> tag.
If you want also the <html> tag, use cont.documentElement.outerHTML.
To get the doctype information, try using cont.doctype.
var cont = document.getElementById('myframe').contentWindow.document;
console.log(cont.documentElement.outerHTML, cont.doctype);
You could also use XMLSerializer if its supported in the browser:
console.log(new XMLSerializer().serializeToString(cont));


try this:
Using document.doctype to get the document doctype
Using document.getElementsByTagName("*"); to get most of the html
https://jsfiddle.net/4hhf6nLm/


following line will retrieve inner html of iframe
document.getElementById('myframe').contentWindow.document.body.innerHTML
Check this answer for more information

Related

How to know the actual height of an iframe's content?

I have this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function resizeiframe() {
var Lyrics = document.getElementById("Lyrics");
Lyrics.height = Lyrics.contentWindow.document.documentElement.scrollHeight;
}
</script>
</head>
<body>
<iframe id="Lyrics" src="X-Raym_Lyrics.html" scrolling="auto" title="Lyrics" width="100%"></iframe>
</br>
<button type="button" id="resizeiframebutton" onclick="resizeiframe()" title="Resize">Resize</button>
</body>
</html>
When i inspect the tag body (or html tag doesnt matter is an example) from X-Raym_Lyrics.html in chrome opened outof iframe i see that my script arent able to pickup a real value of height of the content to the height of iframe.
Is there a way to pickup the real height of the web page.

You can use the following JavaScript code to get the actual height of the iframe content:
var iframe = document.getElementById('yourIframeID');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
var height =iframeDoc.body.scrollHeight;
Some resources:
HTML DOM contentDocument Property: https://www.w3schools.com/jsref/prop_frame_contentdocument.asp
HTML DOM contentWindow Property: https://www.w3schools.com/jsref/prop_frame_contentwindow.asp
HTML DOM scrollHeight Property: https://www.w3schools.com/jsref/prop_element_scrollheight.asp
Don't forget the vote :)

Replacement not working in external JS file

I have my script file "js.js" referenced in my body after h1 and after p. The external javascript is to replace the text but it is not working. The code I have in html is:
<h1 id="header">Example Header</h1>
<script src="js.js></script>
var NewHeader = "New Header Text";
document.getElementByID("header").innerHTML = NewHeader;
Any ideas why this is not working?

just use script tag before the closing tag of body </body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
</head>
<body>
<h1 id="header">Example header</h1>
<script src="js.js"></script>
</body>
</html>
or if you want to use script tag in head tag then just
use async attribute of script tag so script will be fetched in parallel to parsing and evaluated as soon as it is available.
Example : <script async src="js.js"></script>

Facing issue in JavaScript

I am learning JavaScript. I create a file in same folder and linked it with html. The problem is when I write alert("Hello World") so it shows message in browser but when I am trying
document.getElementById("p1").innerHtml = "Hello world"
it does not change the content of my HTML element.

The HTML DOM property is innerHTML, not innerHtml:
document.getElementById("p1").innerHTML = "Hello world";
<div id="p1"></div>

Now the JavaScript code is executed before your browser loaded the DOM, so it won't work.
Move the <script src="main.js"></script> just above </body> in your HTML file. This way the DOM gets loaded before the JavaScript code.
Like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<H1 id="p1">hi</H1>
<script src="main.js"></script>
</body>
</html>

jQuery element selector returns a list instead of an HTML tag

I have created an HTML document and when I use jQuery I am getting an unexpected result instead of seeing the HTML tag in Google Chrome console.
It worked when I was using Javascript.
Is there a setting I am missing?
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery Demo</title>
<!-- <script type="text/javascript" src="lib/jquery-3.4.1.min.js"></script> -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>jQuery Demo</h1>
<ul>
<li>Newt</li>
<li>Howler Monkey Monkey.com</li>
<li id="adorable">Pine Marten</li>
</ul>
GOOGLE
</body>
</html>
The following jQuery code in Google console
$("h1")
should result in
<h1>jQuery Demo</h1>
but the result is just a list and 0 gives me the entire object.
The initial open and last close double quotes of each line are there so I can post it as is.
"$("h1")"
"k.fn.init [h1, prevObject: k.fn.init(1)]"
"0: h1"
"length: 1"
"prevObject: k.fn.init [document]"
"__proto__: Object(0)"

$('h1')[0] === $('h1').get(0) === DOM object of first element
$('h1').eq(0) === first jQuery element
eq()
get()

W3C validator error with Chatango embedded code

So I embedded a chatango tab on my website, but I get this error when validating it for HTML.
The text content of element script was not in the required format: Expected space, tab, newline, or slash but found { instead.
Any workarounds for this? Thank you!
<script id="cid0020000101807397328" data-cfasync="false" async src="//st.chatango.com/js/gz/emb.js" style="width: 603px;height: 471px;">
{"handle":"********","arch":"js","styles":{"a":"000000","b":100,"c":"a0a0a0","d":"FFFFFF","e":"202020","g":"bbbbbb","h":"202020","j":"c0c0c0","k":"0084ef","l":"606060","m":"0084ef","n":"FFFFFF","p":"10","q":"000000","r":100,"pos":"br","cv":1,"cvfntsz":"14px","cvbg":"3366ff","cvw":600,"cvh":30,"surl":0,"allowpm":0,"cnrs":"0.35","ticker":1,"fwtickm":1}}</script>

As Ben said - you cannot use code inside tag with src.
But here is some valid and working solution:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>chatango</title>
</head>
<body>
<script type="text/javascript">
var chatango = document.createElement('script');
chatango.setAttribute('type','text/javascript');
chatango.setAttribute('id','cid0020000101807397328');
chatango.setAttribute('data-cfasync','false');
chatango.setAttribute('async',true);
chatango.setAttribute('src','//st.chatango.com/js/gz/emb.js');
chatango.setAttribute('style','width: 603px;height: 471px;');
chatango.innerHTML = '{"handle":"1shotgg","arch":"js","styles":{"a":"000000","b":100,"c":"a0a0a0","d":"FFFFFF","e":"202020","g":"bbbbbb","h":"202020","j":"c0c0c0","k":"0084ef","l":"606060","m":"0084ef","n":"FFFFFF","p":"10","q":"000000","r":100,"pos":"br","cv":1,"cvfntsz":"14px","cvbg":"3366ff","cvw":600,"cvh":30,"surl":0,"allowpm":0,"cnrs":"0.35","ticker":1,"fwtickm":1}}';
document.body.appendChild(chatango);
</script>
</body>
</html>

Categories

Resources