setAttribute behavior on HTML content, JavaScript - javascript

Initially I have the following
<a id="myLink" href="#amazinglinktonowhere">My initial link</a>
After I load my webpage, I'm able to get the attribute href and text value to change and update the link to point to Google with new text "It's not the same text anymore" and if I click on it, I'm redirected to the Google page. So probably everything works. But if you check my HTML source code, the link still remains the same.
Why? How can I change it? Is it the normal behavior of setAttribute? And even when I change the content with link.innerHTML = 'blabla'
My Code:
var link = document.getElementById('myLink');
link.innerHTML = "It's not the same text anymore";
var href = link.getAttribute('href');
link.setAttribute('href', 'https://www.google.fr/');
<a id="myLink" href="#amazinglinktonowhere">My initial link</a>

As I wrote in this answer, View Source only shows you source code. That is, it shows you the code as you originally wrote it (or at least, how the server sent it, and generally servers send it as-is).
In your case, you are using JavaScript to update the page as it is running. Your source code remains unchanged. The page itself has its own state, which can be manipulated to your heart's desire. We need to update the state of the page to do all sorts of fancy things, like animations, dropdown menus, play videos, and other interactive features. None of these things change your original code, and by association, they won't change what you see via View Source.
If you want to see the result of your code changing the page in realtime, you should instead use the Inspector / Elements pane in your browser.
Firefox Inspector
Chrome Elements

Related

How to parse link url from a tag with sfref?

I am trying to scrape website data and I can look for a tags that I want to explore.
However, this tags are like <a title="Annex" href="https://www.myite.com/d…-3.pdf?sfvrsn=b3a84558_2" sfref="[documents|librariesProv…-4ef8-8b90-ae20b6b7590d">
getting a.href just returns https://www.myite.com/d…-3.pdf?sfvrsn=b3a84558_2 and that results in 404 page.
However, when I click on the tag on web page it opens pdf - the url is slightly modified.
How to handle these types of links in javascript. I am using js fetch similar to this post.
Thanks in advance.
sfref is an attribute that is used to resolve dynamic links. For example, when the a tag is cliked, the sfref attribute value is used to build href on the fly.
I assume you do not have the access to the logic used for link resolution.
The best thing you can do here is to tuse Chrome Dev Tools -> Event Listeners and find out the event where the link resolution happens.
Please keep in mind that different a tags might have a different resolution logic attached to them.

How to show JavaScript output in page source code

In my web page i have use some JavaScript and its works fine and result shows what i needed. but when i go to view page source i have seen only JavaScript code but can not see the output. Below is my code.
var link = document.createElement('link');
link.setAttribute('rel', 'canonical');
link.setAttribute('href', location.protocol + '//' + location.host + location.pathname);
document.head.appendChild(link);
</script>
This code woks good. when i click on "Inspect" on Google chrome i can see the its works. but an not see the output when i click on "View page source".
Can any one tell me how to show the output result in source code??
The view page source context menu option only show whats rendered from the server side. It does not contain whatever rendered on the client side.
If you want to see client side rendering you use inspect element.
In Chrome, if you right-click the element and select "Inspect" the current DOM will be shown in the developer tools Elements panel. It will resemble HTML from "view page source," and include any changes you have made to the DOM via JS.
View Source and Inspect Element are two browser features that allow developers to look at the HTML for a particular page.
view simply shows the HTML as it was delivered from the web server to our browser or client side.
When we inspect an element in Chrome developer tools (using the right-click menu or F12), we are looking at the current state of the DOM tree after:
HTML error correction by the browser or HTML normalization by the browser or DOM manipulation by JavaScript

jQuery href attribute addition visible in Firebug but not in the source code

It may be trivial, but I have following code that is dynamically adding some href attributes to an <a> element, with important variables that are passed to php generated page in a pop-up window.
jQuery(document).ready(function(){
var url = jQuery("a.special-links").attr("href");
var data = "?iframe=true&width=800&height=350&format=popup";
jQuery("a.special-links").attr("href", url + data);
});
When inspected the page with Firebug, the <a> element got the url href properties right, but link does not work. When I inspect the code looking at source code, I see that href data part was in fact not added!
Is this runtime problem or something else ? Thanks for clues...
You do no see the changes when you view source of the page because when you view source you are viewing the actual HTML document that was downloaded by the browser when you loaded the visited the URL. This can NEVER be changed by javascript.
When you write javascript you change something called the Document Object Model aka the DOM. This is an in memory data structure built by the browser as a result of parsing the HTML document. This is what firebug enables you to inspect.

<a>-tag name attribute not working in IE8

i made a link from one page to another page specific part.
here is my Example :
first page
tips
another page
<a name="tips">my tips</a>
it works fine in Ffox but not working in IE8.
what should i do.
Try using an ID instead (make sure it's unique on that page)
<a id="tips">my tips</a>
This seems to be the standard now though I'm not sure why name isn't working for you as AFAIK it hasn't been deprecated.
Update
What DOCTYPE are you using? Seems the name attribute has been marked "Obsolete" in HTML5. See http://www.w3.org/TR/html5/obsolete.html#obsolete-but-conforming-features
This is a long established html standard that most certainly works in ie8. For example, point IE8 to this wikipedia page and then click on the links in the contents box.
I would suggest that the problem is somewhere else in your code or with the link itself being to an invalid page. Some things to check;
Use <a id="tips">my tips</a> instead.
Is there more than one element with the document with tips as the id or name?
If all of the page is displayed within the window with no scroll bar, then the page won't scroll to your tips section.
If the anchor is on the same page that your link is on, simply us <a href="#tips"> instead.

how to get fully computed HTML (instead of source HTML)?

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.

Categories

Resources