When I view the page source of a page (like this for example: http://my.sa.ucsb.edu/public/curriculum/coursesearch.aspx) there's not very much code/info in it. On that linked page, for instance, none of the class info is shown in the page source.
BUT: when I view it in firebug, I can see a lot more of the html information. For instance, I can see all of the class info, in tables.
Why is this? How can I access the full (firebug html)? Can I do it in php/javascript?
This is the order in which stuff happens:
PHP generates HTML
Browser loads HTML
JavaScript manipulate loaded HTML
Why is this?
The view source browser feature normally shows the plain HTML as received by the browser. Other advanced tools like Firefug are able to display the current HTML after being changed by JavaScript. (Firefox itself has this feature as well: just right click on some generated HTML and choose "View selected source".)
How can I access the full (firebug html)?
I'm not sure about the HTML tab but the Network tab always displays documents as received from the server.
Can I do it in php/javascript?
PHP is no longer running when the original HTML reaches the browser.
JavaScript can display HTML with the .innerHTML property of any DOM node.
View Source shows what the browser got from the server. Firebug shows the browser DOM - i.e. representation of the page view that exists in browser memory. DOM can be changed by Javascript. Javascript can access DOM by using document value and then going to its children, etc. - for example, to see all tables, you might do document.getElementsByTagName('table')
If you want whole DOM contents as HTML, you can do something like document.getElementsByTagName('html')[0].innerHTML
View Source simply shows you the HTML loaded from the server, which means that any changes done to the DOM after the page has been loaded will not be shown. The Page source only shows you the first source when the page finishes loading.
On the other hand, Firebug is dynamic and shows you the DOM and how it is being manipulated. When the DOM is being changed, Firebug's source will change as well. This is important for debugging as you can see what is really going on, unlike the View Source.
When viewing the source with "View Source", the HTML you view is the HTML of the URL you are in, and the HTML without any modification from JavaScript and the sort.
Also, if the page had frames or iframes in its code, the content of them will not show either.
Instead, in firebug, changes to HTML dynamically and content of frames/iframes will be visible.
Also, viewing the source of a page before it's fully loaded, can be a reason of not having the whole HTML code (or any HTML code at all).
Traversing the HTML code with JavaScript will always return the full updated HTML code. (i.e. what you would see in firebug)
I'm not sure how you want to access the HTML with PHP, but PHP does not have access to the code after it reaches the browser. But if you are sending a URL to PHP to load the HTML, the HTML you will have is the original HTML before any dynamic changes (i.e. the one you would see in "View Source")
Also firebug will show you the css file which will just be targeted from the main html via
<link rel="stylesheet" type="text/css" href="css">
Therefore showing some more information.
Page source shows you HTML when page was loaded for first time. It does not show you modifications made using javascript etc after page was loaded or after you clicked any button on webpage. To view the currently visible DOM, you can use the following:
For IE/firefox, following bookmarklet works:
https://www.squarefree.com/bookmarklets/webdevel.html#generated_source
For google chrome, right click on any element and choose 'Inspect Element' option. It will show the position of element in DOM. Now right click on '
For opera, right click on any element and choose 'Inspect element'. This will start opera dragonfly. In dragonfly window, Click on 'Expand the DOM tree' button (first button with a dot and two arrows) and then 'export the current DOM panel' button (second button)
In IE, open the webpage and press F12 to open developer tools. Click View->Source->DOM(page) or shortcut Ctrl+Shift+G in developer tools window. This will show the complete currently visible DOM.
For firefox, alternative is Web developer toolbar extension and choose View Source->View Generated source in it.
View source gives you the source of the page when it is loaded, to get the current html, there is a option in web developer tool (Firefox addon) - "View generated source"
in menu :
view source -> view generated source
Related
I'm looking to get information from an external website, by taking it from a div in their code. But using the file_get_contents() method doesn't work because the information isn't in the source code for the page. It only shows up after the page loads (It's available if you use an inspect element in the web browser).
Is there a way to do this? Or Am I just out of luck on that?
This might be a bit difficult to explain but I will try my best.
I have a page that will display some results from JavaScript (time (HH/MM/SS) to be exact).
I need to display the results of JavaScript which is shown on the page in the source code of that page when viewed from a browser, like Firefox right click -> view source files.
I was thinking about echoing the results but that seemed to be a wrong idea, as echoing will only show the results on the page, and not in the source code of the page.
EDIT:
Okay, if it is impossible to show the results of the JavaScript in the page source, then how does this site display the result of the current time, etc, in the page source? I.e. Wednesday, July 31, 2013, etc, etc can be viewed on the page and on the page source.
http://www.timeanddate.com/worldclock/city.html?n=136
I am using Google Chrome to view the page source.
You can't alter the source code that comes from server by the means of JavaScript. While javascript can manipulate DOM objects, the text you see when you click "view source" is exactly as it came from the server, and there is no way you could change that.
To view the changes done by your scripts, use Firebug or some similar tool.
Unfortunately the source code you see when you hit view source, is the response of the http request that was send. Javascript can not alter that source. Any change you would make to the source (DOM) would only be visible in a DOM inspector (ie. ctrl+j in chrome or F12 in IE).
What you want is simply not possible from the javascript side.
I am making an Ajax request query to get variables containing HTML code within a php file. I am currently using this method to display the content retrieved from the Ajax request:
document.getElementById('my_div').innerHTML = request.responseText;
However, when I view page source (Chrome) to see the HTML code on the page, the HTML retrieved from the Ajax response is not shown, but the effect of that HTML code is visible on the page.
Anyone know how to make the Ajax response visible as HTML so that it is visible on view page source?
View source will only show the html of the document when the page was loaded. Any dom manipulation done after that will not be visible in the view source.
You can see it in elements tab in the chrome console (f12) though.
Page source is the source as at when the page was loaded. You cannot get AJAX content to display here.
You can inspect the markup using the Webkit Inspector (Right-Click -> Inspect Element) on Chrome/Safari or Firebug on Firefox or use a debugging proxy such as Charles to watch the data sent/received (including any request data and the response HTML)
You can use your browser development tools to monitor network activity. This usually allows you to see the requests and responses your browser has issued for your current web page, including AJAX calls.
I'm trying to code a seo friendly ajax portfolio right now. My goal is to provide javascript effects to users and normal html to bots/users without js.
Files:
index.php (starting point of my program)
aboutme.php (contains html code for "about me")
contact.php (contains html code for "contact")
The idea:
User visits index.php and clicks on "About me" -> loading animation appears -> aboutme.php gets loaded with ajax -> history.pushstate rewrites the url to aboutme.php.
-> When the user shares the current website url on fb/twitter/g+ the bots will get the correct title, body etc., as it is the normal html page without any javascript.
But my problem is: If other users open that page, they see directly the content. But I want to show them a loading animation first until the data got loaded with ajax (similar as they click on a link).
How can I achieve such an approach? Thank you very much!
Best way to do this, create a javascript file. Write the link tag into "head" part. This will make the javascript file downloaded before content. Javascript shows the animation, but at the same time browser will be downloading the content already in the background. On "document ready" event, stop animation.
This will let bots to access the content directly. Because javascript won't work for them.
To make your ajax content crawlable see https://developers.google.com/webmasters/ajax-crawling/, Bing supports this as well. Or use the HTML5 pushState, see http://www.seomoz.org/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate, https://github.com/blog/760-the-tree-slider etc.
I've always thought this is more effort than its worth(generally), but to answer your question:
index.php, aboutme.php, contect.php should deliver full html.
certain links should have js event handlers intercept the click, and instead of loading aboutme.php, they load aboutme-content-only.php in the background. then update the dom and push state etc...
this way the site can easily degrade for those users who are first time visitors, as well as those whose browsers dont support push state or javascript.
I think that it is not a problem at all, keep your href of links as usual, then using JavaScript or jQuery change the default behavior of clicking link to load the linked contents with ajax.
I have an iFrame on a PHP page that in some cases and in just some browsers in some machines, instead of loading the CSS normally and aplying the style over the iFrame contents, it just shows the CSS code in a plain text mode.
Does anyone know why this could be possible?
Normal way should be, PHP page loading the iframe, this last one loading the content normally and everything appearing beautifully styled inside this iFrame. But as I said, in Chrome in a machine from a specific user (and just him) it doesn't work this way. Instead of this, we see the CSS code inside the iframe when PHP page finishes loading.
Check the headers that are being sent on the iframe's http request, specifically the "Content-Type" header. In some cases, a document that is served as text/plain will not render properly as HTML and CSS. Instead, you will just see the raw code.
This can also happen if your web server is not parsing the file as PHP, but just a plain text file. For example, try renaming a .php script to .myphp and then visit the URL in your browser. You will probably see the PHP source code and maybe even unprocessed HTML and CSS.