Im trying to insert data into the DOM with:
$("#item_384_week_49").append("test");
<td id="item_384_week_49"></td>
Works great, but the data is only displayed not inserted into the DOM.
Is there a way to do that, so that the source code contains the inserted data?
EDIT
Im trying to work with docraptor to create pdf and excel files.
One of the methods to do so i to refer to a web page and the page then gets converted. http://docraptor.com/documentation#referrer_based
If i have the above jquery working to insert data, the data wont be displayed in the generated file.
If the above adds data to the source code, can someone please explain to me why the data isn't displayed when the page is called?
Browsers take source code and use it to build a DOM, that DOM can then be manipulated but the source code is the source code, not a live representation of the current state of the DOM.
Use a DOM viewer if you want that. Most browsers have one built in these days, Firefox has the Firebug extension.
The data is displayed in itself means it is inserted into DOM.
Most of the browsers display the source (via view-source) as received by them from the server initially.
Use FireFox->Firebug combination to inspect the DOM and you will see all the dynamic additions to the DOM.
It is actually inserted. Are you using the "View source" option in the browser? Because the "View source" option will display the source downloaded from the server, not the modified one by javascript. You could see the changes in the source with the "Inspect element" option on the right click (depending on your browser, this is in the latest FF with Firebug and Chrome).
Related
My task at hand is to download a file through vba. The problem is, that the page is mostly generated via JavaScript. Sorry that i cannot just share the page with you, because I dont own it, but I will try to make things as clear as possible.
The HTML from the IE source viewer looks similar to this:
<head>
css stuff
jscript link
more jscript links
more css stuff
</head>
<body>
divs and links and so on
<div magic inside that div that shows on browser but not in source code></div>
</body>
I very much believe that the java script generates an iframe and fills it with html code.
Do you think that it is possible to retrieve the finished iframe from the java script? Because I can literally see the HTML code when i use the chrome DOM explorer, but I cannot fetch the HMTL data in vba. It drives me crazy that I dont understand this :D
Thank you for your time
What you have described looks like a typical DHTML that could be generated by JS after XHR request. So open the web page e. g. in Chrome, check the Network tab. After the target content has been generated on the page, you will see all requests on the tab, examine them, usually all the data you need to retrieve are shown there (note that some conversion of the data may be necessary). If you find it then you may just do a XHR with the same parameters to retrieve result. Or another way, you can retrieve the generated HTML content accessing DOM, if the iframe is same origin, as it was mentioned above.
I have been trying to find a way to alter the final HTML DOM output (i.e., after JS script adjusts the HTML output) before it gets rendered on the browser.
I found a hook in Wordpress called 'template_redirect' which works well if I want to change the HTML output before JS gets executed but not after. So the before JS script execution, all I see is the JS name only from this hook.
Here's the problem that I'm trying to solve. In my wordpress blog, I'm including a JS script from third-party and this JS is inserting extra tags (such as Schema.org tags regarding that their organization - Schema organization tags). It is about 3000 characters long and it is bloating my webpage. I would like to remove any extra tags that gets attached to my final HTML (it is getting added before </html> tag) before shown in the browser.
Note that I don't see these extra tags when I do view source and they show up only when I do inspect element from Chrome or FF.
Any suggestions on how to remove the HTML DOM after JS execution but before it is shown on the browser via Wordpress hooks or any other way?
Thanks, JK
JS is executed in the users browser not on the sever(in almost all cases). You can either remove the tags after they are rendered using more JS(which won't really help any "bloat"), or take a look at the code for the plugin you are using and alter the plugin
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.
Given a webpage that uses lots of javascript to generate its HTML, how can I get the final computed HTML being parsed by the browser instead of the source HTML? In other words, presume a page has lots of tags surrounding javascript functions that, when called, return some HTML. When I view the source of the page, I see the script function call, not the HTML it produces.
How could I get all of the HTML produced by a webpage?
I've noticed that Firebug appears able to see the HTML instead of the scripts, but it doesn't appear to have any way to save the whole page, only little segments of it.
Update:
Thanks for all the answers. However, I'm still not getting the HTML I see in Firebug's console with any of those techniques. For my example page, I'm using the 'Info' tab of my own Facebook profile. If you view source on that page, you'll see lots of scripts with the title 'big_pipe.onPageletArrive()'. However, if you look at it in Firebug, each of those function calls renders out to HTML. I tried the right-click on the tag in Firebug, the View Generated Source in the Webdev Toolbar, and the Chrome suggestion, but they all give me the script call, not the HTML.
Any other ideas?
Update 2:
When I said each of those functions renders out to HTML in Firebug, I wasn't quite correct. They only render out if I select them in the page and right click->Inspect Element. Then it appears to render it out. So maybe my question has become how do you get Firebug to automatically render out all of the HTML so you can select and save it? (Or I'm open to any other solution for grabbing this HTML).
With Firebug's HTML tab, you can right click on the <html> element, and click "Copy HTML".
You can do the same thing with Developer Tools in Chrome/Safari.
The Web Developer Toolbar for Firefox has a "View Generated Source" option which provides this functionality.
with (window.open("")) {
document.open("text/html");
document.write("<!--\n"); //for live version delete this line
document.write(opener.document.documentElement.outerHTML.replace(/</g,"<").replace(/>/g, ">"));
document.write("\n//-->"); //for live version delete this line
document.close();
document.title = "DOM Snapshot:" + opener.document.title;
focus();
}
Open console
copy paste the above code and execute
it opens an empty page,
now inspect the page with right click or f12,
copy outerhtml of the comment
paste wherever you want
optionally remove the comment at the start and end
If you want a live version that is clickable, then simple leave out the comment tags in the above code.
document.getElementById('awesomeness').textContent = document.documentElement.outerHTML.replace(/<\/\w+>/g, (e) => e + '\r\n');
<div id="awesomeness" style="overflow:scroll;width:100%;height:100%;white-space:pre;"/>
so yea, use that...
I was having problems with a page generated by Javascript: the content would only render if the page was scrolled down, so the copied HTML was incomplete. This happened to me with all suggestions based on Chrome.
This issue was solved by the following trick:
Open a console, then type a zoom that will render the entire page (or desired contents), e.g.
javascript: document.body.style.zoom = 0.1
Copy the HTML as per other suggestions, e.g.
copy(document.querySelector('html').outerHTML)
When pasting, search the text for "zoom", then revert the value to "1", save the HTML.
It is not possible generally. Here is excerpt from my bookmarklet which relies on non-standard outerHTML:
with (window.open("")) {
document.open("text/html");
document.write("<PRE>");
document.write(opener.document.documentElement.outerHTML.replace(/</g,"<").replace(/>/g, ">"));
document.write("</PRE>");
document.close();
document.title = "DOM Snapshot:" + opener.document.title;
focus();
}
Note: DTD is missing and not retrievable at all.
I have created a graphics using jquery. and i want to convert this web page to pdf or an image. Which one is simpler? but when I convert this page to pdf that graphic will not shows. can any help me to solve this problem??? please refer some code.
JavaScript is interpreted by the browser, not by the HTML -> PDF application. I'd recommend using wkhtmltopdf, as it uses Webkit to render, so maybe that would fix your problem.
To try to render the page that includes JavaScript, fire up Google Chrome (or another browser with a DOM Inspector of sorts), open your webpage, right click and select Inspect Element, right click , click Edit as HTML, and copy & paste the HTML into a new text document, save it, and use that instead to convert to a graphics.
You have to go through a complicated process like this because that application that your are using renders only HTML + CSS, and doesn't even parse the JS. The DOM inspector shows the HTML pages as it currently looks, not when it was loaded.
I hope I didn't make it too complicated...