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.
Related
How to change the html code in chrome:// pages, for example, a page that has no internet, how do I modify the main code so that even if I enter the page again, the changes remain
Example:
https://images.app.goo.gl/eq5XGEu2f54TWqcf9
unfortunately, there is no way to change this. a page embedded in an exe
you can use chrome plugins to change the page style.
https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe
I am trying to create a scraper using vb6, my technique is to search the html page with get between 2 text function.
the function is tested and working correctly for all the sites, except a new site that I tried to use the same technique with it and failed.
The problem is the html is not showing the data, piece of the html as below:
<tr>
<td valign="top" nowrap="nowrap" class="label">Company Name:</td>
<td><span class="search-custom" id="synopsisDetailsOppNum"></span></td>
</tr>
the value should appear between the span tag above, but it's not appeared inside the HTML as above code.
The website is using javascript to manage the data.
I have tried also to use wait function, may the data appear with the HTML, but failed too.
Is there any solution to get the value, even with vb.net as I can update my code
that website is using JavaScript to add data to the webpage and such manipulation will not show up on the page source
The follwoing is quoted from JavaScript & jQuery: The Missing Manual by David Sawyer McFarland
One problem with using JavaScript to manipulate the DOM by adding,
changing, deleting, and rearranging HTML code is that it’s hard to
figure out what the HTML of a page looks like when JavaScript is
finished. For example, the View Source command available in every
browser only shows the web page file as it was downloaded from the web
server. In other words, you see the HTML before it was changed by
JavaScript, which can make it very hard to figure out if the
JavaScript you’re writing is really producing the HTML you’re after.
For example, if you could see what the HTML of your page looks like
after your JavaScript adds 10 error messages to a form page, or after
your JavaScript program creates an elaborate pop-up dialog box
complete with text and form fields, it would be a lot easier to see if
you’re ending up with the HTML you want. Fortunately, most major
browsers offer a set of developer tools that let you view the rendered
HTML—the HTML that the browser displays after JavaScript has done its
magic. Usually the tools appear as a pane at the bottom of the browser
window, below the web page. Different tabs let you access JavaScript
code, HTML, CSS, and other useful resources. The exact name of the tab
and method for turning on the tools panel varies from browser to
browser: • In Firefox, install the Firebug plug-in (discussed on page
477). Open a page with the JavaScript code you wish to see and open
Firebug (Tools→Firebug→Open Firebug). Click the HTML tab in the
Firebug panel, and you’ll see the complete DOM (including any HTML
generated by JavaScript). Alternatively, you can use the Web Developer
toolbar in Firefox to view
both the regular HTML source, and the generated HTML. • In IE 9, press
the F12 key to open the Developer Tools panel, then click the HTML tab
to see the page’s HTML. In the case of IE9, the HTML tab starts by
showing the downloaded HTML (the same as the View Source command). But
if you click the refresh icon (or press F5), the HTML tab shows the
rendered HTML complete with any JavaScript-created changes. • In
Chrome, select View→Developer→Developer Tools and click the Elements
tab in the panel at the bottom of the browser window. • In Safari,
make sure the Developer menu is on (choose Safari→Preferences, click
the Advanced button, and make sure the “Show Develop menu in menu bar”
is checked. Then open the page you’re interested in looking at, and
choose Develop→Show Web Inspector. Click the Elements tab in the panel
that appears at the bottom of the browser window. • In Opera, choose
Tools→Advanced→Opera Dragonfly. (Dragonfly is the name of Opera’s
built-in set of developer tools.) In the panel that appears at the
bottom of the browser window, click the Documents tab.
so the scraper won't download the page after the JavaScript finished it will get what it looks before any the JavaScript manipulation
you can watch Michael Schrenk talking about Screen Scraper Tricks: Extracting Data from Difficult Websites
http://www.youtube.com/watch?v=NtffxCi8aq4
I am using a jQuery CSS style on the main portion of my website. It works fine. Now, I also have a sub-directory of my website which should not use the style. When I manually navigate my browser to the sub-directory of the website, no style is applied which is what I want. When I click on a link to the sub-directory from the main area, however, it is applying the CSS style from the main part even though I am not referencing this CSS anywhere in the HTML of that sub-directory. If I refresh the browser, the style goes away.
Please can someone help me understand what is going on here? Thank you.
You are using jquery mobile, which by default loads the content of links via ajax. That means you don't have a page refresh when clicking on a link. The contents get dynamically inserted in your document which still has all your css.
More information here.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
You have to disable ajax for that link. More information here.
jquery-mobile - how can I bind disable ajax links to a certain class
Clear your history and browser data, then refresh and try.
Try to open the link in chrome and using the developer options (F12)
look for the resources it is referencing. If the page is referencing
the CSS files then either Javascript is making the referencing or
you have accidentally kept the resource link. Let the forum know your findings.
Edit
Somebody seems to have done what I have mentioned and has come to conclusions that they are because of AJAX. The steps I have mentioned above would let you do that all by yourself.
What would cause an HTML table and form (viewable in view:source) not to render or appear on the page?
It also does not appear in Chrome's Developer Tools console or Firebug console.
I have been trying to figure this out all day and searching is not helping.
Any changes from the raw html you see in view source to the rendered DOM in the browser is caused by JavaScript.
There must be some code on that page that is removing your table.
Can you please provide some code examples of scripts that are on the page and that you are including?
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?