Access HTML Code of another document of same server - javascript

I was working on reading a source of a html page (on the same site not cross domain) and use the div content to be shown on another page.
I want to access the HTML content of source.html without actually loading the file.
It is important for me to use HTML DOM only. I don't prefer to load the complete html source on a String var and parse it using REGEX or XML.
One of the approaches is to use frames and put the source html file on a frame and setting the src
parent.window.document.getElementById('sourceFrame').src = "htmlfiles/source.html";
this will load the source on a frame, allow to collect the div content by using
divHTML = parent.window.frames["sourceFrame"].document.getElementById("targetClassname").innerHTML
and show it on the target page using
document.getElementById("targetClassname").innerHTML = divHTML
This works fine but, it will load/show the HTML file. 0% width frame cannot be a solution as it WILL load the html document, its not visible that's it.
So, its about accessing the HTML content of source.html without actually loading the file, Any thoughts?

you can use an ajax request to get it, and then do with it what you want
$.ajax("htmlfiles/source.html", {
success: function(sourceFile){
// do something with the html file (sourceFile)
}
});

Related

Is there a way to load a page with static header and footer, yet changing content body

I need to make a webpage where the main.html loads a page with a header and footer that will remain steady after I click on some navigation links, but only changing the body content, all this, using Javascript. The body content comes from another html document in the same folder. I've seen some answers to this, but very old ones using PHP. Please help.
BTW, I'm not using server yet, only loading from file with Chrome. Basically I want to replace the whole body of the page with the body of another html.
You can change part of a website by javascript and load content from other urls using ajax.
https://www.w3schools.com/js/js_ajax_intro.asp
And you can use jQuery lib to perform the ajax calls:
https://www.w3schools.com/jquery/jquery_ref_ajax.asp
The ajax calls can be to a server (this includes firebird and other content from the cloud) or to some files of yours.
It's not the only way, you could also have a look at iframes to see whether they fit your needs.

Browser removes nested body tag

I have some basic pre-made html temapltes, some text elements within these templates are editable. The template is dynamically loaded into a wrapper div, edited and then saved. This works perfectly.
Basic example:
HTML
<div id="html-wrapper"></div>
Json response and load template into #html-wrapper
$('#html-wrapper').html(data.htmlTemplate);
Save via ajax after editing
data = {};
data.html = $('#html-wrapper').html();
// send via ajax
The above code saves everything fine. The only problem is - the templates html and body tags are stripped out by the browser. I assume the browser is trying to be clever by sripping out nested html and body tags. Is there a way around this?

Constructing full HTML page

How can one load a HTML file and run javascript embedded in it to construct full HTML page programatically in the same way as done by browsers?
Edit 1 - I have an application where I am trying to read some data embedded in an html page of a remote website. However, after fetching this page from remote website, I don't see that data because that data is actually loaded by a javascript embedded in this HTML page after browser loads initial markup. So, I need a way in my application to trigger javascript embedded in the HTML page in order to construct full HTML page.
If you mean that you have an HTML file stored on your computer, the only way that you can compile it is with your browser. Just enter the absolute file path in your browser's url input. If I misunderstood your question, leave a comment and I'll correct my answer.
Question needs more details, but depending on what you want:
If you want to dynamically load different HTML documents, see iFrame
If you want to insert elements to an empty html document:
First, make a blank html document
<!DOCTYPE html>
<script src='main.js'></script>
</html>
Then in main.js do:
var html = document.querySelector('html');
// Append remaining page elements to the html element here.
// (the `head` and `body` elements may have been automatically created)
// You will need createElement and appendChild
createElement
appendChild

Can get() retrieve full html after that page's scripts finish adjusting it?

Is there a way to perform an AJAX GET on a page and retrieve the final version of the HTML on that page after all of its own scripts have finished adjusting its contents?
Right now if I perform a GET on a page with scripts that are adding to the HTML, it'll give me the full HTML as it was before that extra content was added.
So if there's a javascript generating a specific table on that page, it wouldn't be returned by the GET. Because it didn't exist before that page's scripts generated it.
How can you get() the finished product of a page's HTML, after anything on that page altered it?
A AJAX call will only return what the server sent back,
But what you can do is Drop the response (data) in the DOM and that will cause javascript to run, and then you can take out the content with jQuery,
See Bellow:
$.get("data.html",function(data){
//insert the response in a hidden div that will cause js to run and apply changes
var $container = $("<div>").html(data);
var newData = $container.html();
//newData will hold the final html
});
Note: The actual script element will not be in newData.
Hope this helps

How to use Ajax to bring a page into my site then wait until it is fully loaded scripts and all

I have a site which pulls pages into a dynamic interface. Currently, the main page requires that any javascript the external pages will need be loaded with the main page. Most javascript the external pages have are objects that are built when the page gets pulled in, but first, which causes issues.
It's a little hard for me to explain for some reason so here's a simple walk through of process.
1.Request a page be pulled in
2.Based on a variable passed to function create a specific object which will be associated with the physical html coming from the page ( This is the external Javascript)
3.Load page into the objects frame
This flow requires that the external javascript be attached to the main page not the page being pulled in.
I want to switch steps 2 and 3, but I assume that I will need a way to know that the page and all its scripts have fully loaded before attempting to create the designated object, but I have no idea how to do that.
I am using jQuery and hope that this can be accomplished without a plugin but if it is needed then so be it.
Thanks
Update
Good questions. So the pages are local pages that we build at this point, so we know what to expect. Also the pages are loaded just into basic div structure.
Specifically the main page makes a request to get a page. That page is returned in the form of a string and is then pasted into a div element that is on the main page. The pages are more like fragments I guess. But they can range from fairly complicated and require a bit of javascript to not using any javascript at all.
And the external javascript would generally be added via a script tag and is not inline.
Due to the dynamic nature of the page we do NOT use IFRAME's, they cause issues with the movement of our modules.
If you're using an iframe then I imagine you are changing it's src attribute. To get an alert on when that iframe is done loading you should include a script on the page within the iframe:
<script>
$(window).load(function() {
alert("All Done");
});
</script>
If you are just requesting a string version of a page via AJAX and populating a div you need some extra JavaScript to detect when those dynamically loaded script files have finished downloading to the client.
I would visit this link to get you started.
A combination of Nick and Mic's solution.
In your IFRAME pages, you need a way to determine when the content is done loading, or ready, and then alert your main page:
<script>
$(function() {
parent.frameReady();
});
</script>
In your main page, you can code in the hook from your IFRAMEs:
<script>
function frameReady() {
// attach custom js to iframe here
}
</script>

Categories