jQuery get entire iframe source including comments outside <html> - javascript

The question How do I get the entire page's HTML with jQuery? might look similar, which helps in obtaining data from <html> and <!DOCTYPE>. But in addition, I also require to obtain any comments that persist before the <html> tag.
I am displaying the page with the help of srcdoc attribute using jQuery. My current code to obtain the data is
$("#myiframe").contents().find('html')[0].outerHTML;
and a snippet in this answer to obtain <!DOCTYPE html>
Sample use case:
<!--
This comment will be used for further processing
-->
<!DOCTYPE html>
<html lang='en'>
<head>
...
</head>
<body>
...
</body>
</html>
<!--
This comment will be used for further processing
-->
The current output is only from <!DOCTYPE html> to </html>. Expected to have the comments outside.

Have a look at jQuery's $.get function. This basically returns everything you would retrieve with a normal GET request.
https://api.jquery.com/jquery.get/
Try this:
$('iframe#myiframe').load(function() {
getFrameContent(this.contentWindow.location);
});
function getFrameContent(windowURL) {
$.get( windowURL, function( data ) {
//where 'data' is the page contents
$( "#whateverElementYouWant" ).html( data );
});
}

Related

How do I call the JavaScript function properly?

<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Example</title>
<script>
function displayString() {
return "<h1>Main Heading</h1>"
}
displayString();
document.write("Execute during page load from the head<br>");
</script>
</head>
<body>
<script>
document.write("Execute during page load from the body<br>");
</script>
</body>
</html>
So this is my problem. No matter where I put the displayString(), the h1 just never seems to show up on the browser. Can anybody please help me see where I am wrong? I am new to JavaScript. Oh, and what I am trying to do is to call the function.
You need to write the returned String to the document:
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Example</title>
<script>
function displayString() {
return "<h1>Main Heading</h1>"
}
document.write(displayString());
document.write("Execute during page load from the head<br>");
</script>
</head>
<body>
<script>
document.write("Execute during page load from the body<br>");
</script>
</body>
</html>
No matter where I put the displayString(), the h1 just never seems to
show up on the browser.
If you wish to add a new element to a document, several approaches are available:
document.write (effectively deprecated)
.innerHTML (sometimes useful, but can be slow)
DOM API - recommended approach
The recommended approach is to use the DOM API.
DOM stands for Document Object Model. Essentially it's the markup of your document represented as a tree-like structure of nodes. There are many DOM API functions which allow you to:
add
remove
append
prepend
insert
update
new DOM nodes.
Any DOM node may be added, removed or updated, including:
parent elements
child elements
sibling elements
element attributes
ids, classNames, classLists
custom data-* attributes
text nodes
Here is an example:
function displayMainHeading () {
let mainHeading = document.createElement('h1');
mainHeading.textContent = 'Main Heading';
document.body.prepend(mainHeading);
}
displayMainHeading();
<p>Paragraph 1</p>
<p>Paragraph 2</p>
Further Reading
This is a good primer to get you started:
A Beginners Guide To DOM Manipulation by Iqra Masroor

jQuery .find() doesn't see an element

I have this template:
<script id="work-template" type="text/template">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body></body>
</html>
</script>
After I try to get body element with this code:
base_html = $('#work-template').clone();
alert(base_html.find('body').length);
But, it returns 0. How it can be?
The contents of #work-template are a string, not a DOM tree. You're trying to access the contents as if it is HTML markup, but it's unparsed.
If you were to use something like jquery-templates, you could do what you're attempting here:
$.tmpl($('#work-template').text(), {}).find('body').length;
Other alternatives would be Handlebars, Underscore, and a whole wealth of others.
Or, as Kevin says, you could just parse it with plain jQuery and $.parseHTML, but you can't do any extra fanciness with token replacement or loops:
$.parseHTML($('#work-template').text()).find('body').length;

How tho fetch the json data in Javascript for the image attached,it says undefined

image from html codethis is the screenshot of the consolestrong text
2 images attached
When i am trying to fetch the id its saying Undefined. i am trying like response[0].id . if we write like response[0] it shows json object also.
Also if we copy the json data to console and paste the value of response to a variable and then do response[0].id then it works. but from code it doesnot.
Seems a problem with your JSON data.
This is the code i have written working fine with javascript.
<!doctype html>
<html>
<head >
<title>
stack
</title>
<meta charset="utf-8">
</head>
<body>
<button onclick="myFunction()">Click me</button>
</body>
<script>
var response=[{"id":"1", "name":"abhishek","gender":"M"},{"id":"1", "name":"abhishek","gender":"M"}];
function myFunction() {
console.log(response[0].id);
}
</script>
</html>
Hello can you please try something like:
var listdata = [{"id":"1", "name":"abhishek","gender":"M"},{"id":"2", "name":"yogesh","gender":"M"},{"id":"3", "name":"rubi","gender":"F"}];
console.dir(listdata[0].id);
alert(listdata[0].id);
you can see running example here

Why is responseText outputting?

CodeIgniter 3.0
Form uses button as the submit event:
<button type="button" name="submit">SEARCH</button>
Here is the very simple javascript I have so far, and I don't see why it should be outputting the form page in an alert box:
$( document ).ready(function() {
$("button[name='submit']").click(function(){
//
});
});
Produces an alert box with readystate, statustext, and responsetext:
200 , OK, <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
(...and the entire html output of the form page goes here...)
</body>
</html>
I don't understand why my js should output anything if I haven't told it to.
As it turns out, I was calling another javascript in my head, which had an identical $(document).ready(function script section. Even the <button name='submit'] was the same, so my javascript much have got confused and just threw up the status codes and responsetext.

How can I get the content of a loaded file (with script or link)

I was wondering, how I get the content of a loaded script, stylesheet, ... bye an accessing an id set on the element.
Example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="../jquery-1.8.3.min.js"></script>
<script id="test" src="test.txt" type="text/isis-template"></script>
<!-- File contains "Hello world" -->
<script>
$(function () {
$('#test').GET_CONTENT_OF_LOADED_FILE
});
</script>
</head>
<body>
</body>
</html>
Background: I want to load HTML templates (e.g. for mustach, knockout), but don't want to write them into the page, I'd rather have them in a seperate file. Now I saw that I can load any file with the script or link tag, so I was testing if I can load them like this....
Any comments why this might be a bad idea or how it can be done better are appreciated.
Try using load()
$(function () {
$('#test').load('yourfolder/test.html', function(resp){
alert(resp);
});
});
If you have already load the contents in some html element
contents = $('#test').html();
So you want the content of text/isis-template file when document is ready?
You are lucky because this file doesn't fall for CORS but mine(the answer i was looking for and came here today) do.
Well just do ajax!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="../jquery-1.8.3.min.js"></script>
<!-- File contains "Hello world" -->
<script>
$(function () {
$.ajax({ url: "test.html"})
.done(function(cont) {
var GET_CONTENT_OF_LOADED_FILE=cont;
});
});
</script>
</head>
<body></body>
</html>
If you use debug tools and see the network activity, you will see that it does not load the external files (since it is not a text/javascript, and the browser does not know how to handle it)
(wrong test on my part, was testing local files)
So you only have a tag there with an id and an external resource in the src attribute. Treat it as just metadata.
You will have to manually load the resources
something like this
// load external template resources
$('script[type="text/isis-template"]').each(function(){
$(this).load(this.src);
});
For actual use you would need to make sure the templates are loaded before you try using them..

Categories

Resources