how to change title without refresh or reload ? It can be changed by jquery but effect will not be done on view source.
i've use document.title. On browser it is changing value but when i open page source it shows blank.
There is no way to change the source of a page with (client-side) JavaScript. The source is the raw code that was delivered to the browser.
You can change the current DOM, and a DOM viewer (such as you can find built into most browser Developer Tools) will show you a serialization of the current state of the DOM.
...but when i open page source it shows blank.
Could you elaborate? I've just tried this myself and it works fine:
<head>
<title>Abc</title>
</head>
$(document).ready(function() {
$('title').text('test');
})
When viewing the source of the page the title now contains "test".
JSFiddle example.
Related
I need to view all source HTML in plain text in one place. I need it from an already loaded page. CTRL+U (View Source) refreshes the page. The page I'm trying to view can only be accessed via proper form submit. What I really want is for CTRL+U to not refresh the page.
I need the HTML source of an already loaded page added to my clipboard.
I think none of the other answers really answer your question.
You want the exact response from the server, not the current DOM, and you want it with the exact request headers that was sent the first time.
To do so, open the Chrome Dev Tools and select the "Network" tab.
The very first request should be the page you requested. Click it and select the tab "Response" on the right side to get the exact response the server gave you.
Right click-> inspect element anywhere you want to see the html, it still show the code of all the page ans you can modify the value of html/css directly in it.
The only answer is the one Dor1000 provided himself in a comment:
dev tools, elements tab, right click html tag, copy, copy outer html.
He wants the current HTML (after javascript or any other modifications, not the original source HTML).
I know you can't hide HTML / Javascript / CSS because it's run on the client side, but how does iCloud.com hide its HTML?
When I view the page source on iCloud.com I just get presented with loads of Javascript, but when I go to inspect element in Chrome I can see the HTML.
I was just curious as to how they did this.
If you look closer at the page source you'll see this:
#noscript div#container{position:absolute;top:0;left:0;right:0;bottom:0;min-height:500px;}
#noscript div#overlay{position:absolute;top:0;left:0;right:0;bottom:0;min-width:600px;min-height:550px;background:#0B080E;opacity:.84;}
#noscript div#container div.float-center-canvas{z-index:101;position:absolute;background-image:url
....
It seems all the markup is generated in javascript and if javascript isn't enabled they run noscript. Not that anyone would be able to use iCloud without JavaScript in the first place...
All that javascript you see when viewing the source is responsible for generating the document that you can then inspect in developer tools once the page is loaded. Nothing is hidden; it's just that the document doesn't get generated until after the page is loaded.
I am trying to access the HTML code source of AJAX dynamically loaded content. How could I do it?
For example on Gmail, I am trying to access the HTML code of a given email discussion's content (the different entries of a given email discussion) which is loaded only when I click on this email discussion's line in the main list. The code source I can access is only the one of the page initially loaded (the list of all email discussions). Any idea?
Right-click on the page and select "Inspect Element". The element view is updated when JavaScript makes changes to the page, whereas the "View Source" view only shows content from when the page was loaded.
If you right click -> "View Source", it will show you the contents of a reloaded version of the page you are on.
Using "Inspect element" (hotkey CTRL+SHIFT+i) in Chrome shows the source of the dynamic content.
I think you want to bind event on the dom element that loaded after initial page load using ajax. If so then you can use jQuery library and you can use live method of jquery.
Here is a link for live method, you can check that.
http://api.jquery.com/live/
What you need
Download jquery latest library (http://docs.jquery.com/Downloading_jQuery)
and then include it in script within head
or you can use cdn http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
then do like following
<script>
$(document).ready(function(){
$("#ajax_dom_element_id").live('click_or_any_event',function(){
code snippet you wan dot
});
});
</script>
I think it will be helpfull.
Javascript run at page opening or later by user action like clicking a button with javascript attached, can alter the page contents and for instance change the layout in the browser.
Using right-click "View Source" shows the original content, not the changed one.
But how/from where can one retrieve the new, changed page contents?
You could use Firebug to see the live contents of the DOM, or you could use Web Developer's view generated source feature.
I have PHP generated HTML.
Firebug shows me this source:
<div class="module-header"><div class="module-header2"><div class="module-header3"><h3 class="module-title" style="visibility: visible;"><span>Մարդկային</span> ռեսուրսներ</h3></div></div></div>
Mozilla Source shows me another HTML for that part.
<div class="module-header"><div class="module-header2"><div class="module-header3"><h3 class="module-title">Մարդկային ռեսուրսներ</h3></div></div></div>
Actually this part should work as link. But doesn't...
Firebug is showing you the actual page content at that exact moment, whereas "Show Source" is showing only the static HTML that got downloaded from the server.
If JavaScript is making any changes to the page, the two will be different. In this case, it looks like JavaScript is removing your link and hiding the h3 element.
I see a style="visibility: visible; in Firebug's source. Are you sure you are not messing with the HTML via Javascript and some .show() .hide()?
Firefox's Source is the way to go for static HTML -> There is no rendering difference from what you see in your browser window and the source you see with Right Mouse BUtton > View Source, but (there always is a but) if you change the source dynamically - e.g. via JS when hovering over one link it hides some other part of the website - the Firefox "View Source" will be wrong and not reflecting these dynamic changes - these you will only be able to see with Firebug.
Maybe you can try a different browser and see if it is working there as a link?
Javascript might interact with your page and could hide the link because of some pre-condition. Maybe you want to turn off Javascript and see if your link is working then?