Context
I'm trying to use the javascript fetch command to return the HTML of a leetcode.com webpage, but when I do the returned HTML is in a pre-rendered state i.e. the div of interest is empty:
<div id="app"></div>
When I load the page of interest with my browser and inspect element however, I can see that this "app" div gets populated with dynamic content as leetcode uses single-page-application technology. This rendering must be happening after the fetch command executes.
Question
I would like to know how to use the fetch command or similar in order to retrieve the html of a fully rendered webpage. I would like to do this to scrape some content which only appears after the webpage has been fully rendered.
Assumptions
I'm assuming that the fetch command cannot return html that gets rendered by javascript, i.e. similar to what you'll find with vue.js or react.js
Related
I am studying the basic internal functionality of the JavaScript TurboLinks framework at the moment. From what I understand, onclick events are assigned to all anchor tags to be able to prevent the default action (full page reload) and load the link content via AJAX instead. Please correct me if I am wrong here.
When the AJAX callback receives the whole HTML document as a string, how can it be rendered without (re)loading script and style tags?
Scripts and styles will only be (re)loaded and evaluated when they are inserted into a page. When the HTML is received via AJAX, Turbolinks creates a new HTML document behind-the-scenes, and sets its content to the HTML response. As this is not yet rendered/inserted, the browser does not download/evaluate any scripts or styles. The <head> of the new document can now be compared to the current one and additional assets can be added as necessary.
In terms of the specific Turbolinks components:
Visits create Snapshots from the AJAX response (see Visit#loadResponse)
Snapshots create HTML elements behind-the-scenes (see Snapshot#fromHTMLString
SnapshotRenderers handle merging the <head> and replacing the <body> (SnapshotRenderer#mergeHead and SnapshotRenderer#replaceBody)
I am working on a Hugo Static Site Generator theme, the problem is that the Javascript features don't load unless I reload the page
e.g
Before reloading the page
After reloading the page
This is the code, I used in adding the new class
$(document).ready(function() {
$('h2').addClass('hello')
});
Now, the problem is that since it is a static site generator when opening a new page, it will not refresh/reload the site, but load the page like a cached page. therefore most of the javascript features only apply once unless the page is reloaded. The problem is also experienced when I am using VueJs on the theme, Which means, I need to find a way to force load a new URL, instead of it loading like an anchor link.
UPDATE: I have been able to resolve it, The problem was from another javascript file, making an ajax get request
Thanks
Did you debug or add console.log inside your ready function to see it can reach there? I am suspecting that your h2 is rendered by js and at the time your code to add class hello that h2 is not rendered yet.
If this is the case I think you need to render html at server first or you can include your script in the same place as your components
I'm trying to include a file using ng-include.
the side-bar appear in the UI but when I say view page source that time the HTML tags of the side-bar doesn't appear.
That is because when you view the source of an HTML page in any browser, it will perform a fresh GET of the original document and display that source code. Since AngularJS injects elements to the DOM dynamically (and because it is "just" JavaScript all together), the original generated by the server-side will not be modified. To see the generated source, use a developer tool of your choice, i.e F12 Developer Tools in IE. Also, you may want to read up on the role JavaScript plays in the whole lifecycle of webpage rendering.
I'm creating a web application to display reports which are being fetched from Tableau server. I use tableauSoftware.viz() function to get the reports and display them.
I'm using tableau_v8.js file.
An iframe is generated dynamically using tableau_v8.js file. This iframe contains an HTML document that uses dojo framework to create UI components on HTML page.
On the click of a button on the UI which was generated inside the iframe, some new HTML DIV tags gets added dynamically.
I think these DIV tags are being added because of some script or functions being called on the in the JavaScript (i.e. tableau_v8.js) file or because of some request being POSTED on to the tableau server, but I don't have a clear understanding on how these elements are being generated.
How do I find a way to understand the dynamic creation of HTML document as well as other HTML components inside an iframe?
How should I go about this issue?
Exist some method to reloading a script layout wiht emberjs using ajax html called?
Example
Page load all the information
Press a button which looking with ajax a html (including a script handlerbar) and load it on a div element
Take that layout view and used it with a view.
NOW I Just can use the layout view that i created before to call the emberjs object. but i need created too many layout and i want to loading with each request from the user.
Thanks i u can help me
I had a very similar need (dynamic template loading).
Maybe a part of your solution is here: Is it possible to load a Handlebars template via Ajax?