How to navigate a webpage contaning multiple html sources? - javascript

I am working on a webpage crawler and find that my target webpage whose url is like
http::/www.xxxxx.com/main.aspx?View=xxxxBrandName=xxxxIsSsoLogin=xxx
And when I try to look at the source of this webpage, I find that there are many different
html sources if I right click on different positions and the result is also different if I click View->Source in IE (I can only use IE to open this website).
I am very new to HTML so I can't tell what happened exactly. Any one can give me any clue on this?

On chrome right click + inspect element and go to the sources tab, there you can browse through all the sources. Furthermore on Firefox you can use firebug to do similar things.
It's hard to say what exactly is causing the different results when you view source but it is possible that the page just has a lot of random crap e.g. add-ons, plugins etc.

Related

Firefox inspector sees elements with IDs that javascript console cannot find

Trying to automate some tasks on a private web application. When I use a right click > Inspect Element on a form field for example, I am shown the Inspector panel, and the HTML element is shown, with its id right there. Problem is, if I run a
document.getElementById('theId_shown_on_the_inspector');
on the console, I just get null back. This web application relies on Java by the way.
Is there anything you can think off that may throw some light on this weird behavior? Basically I need to be able to automatically populate some fields and click on some buttons, but I cant if I am not able to detect them.
As shared by Jaromanda X, the page has iframes loading content from other URLs. Since I was working with GreaseMonkey, I did not include these URLs in the list of #includes, and using the Firefox console was not working either because you have to select and load those iframes into context (again as indicated by Jaromanda X).
Firefox provides enough details about the iframe URLs which to include in the GreaseMonkey script.

Using arrows to navigate a page in Chrome

So the situation is that I have a media PC (Ubuntu, kodi, mythtv, chrome) and I have a chrome launcher for things like netflix to open up. However, this creates an issue when trying to browse with the remote (using an xbox 360 media remote).
I think the easiest way to get around this would be somehow be able to use the arrow and OK keys to navigate around different elements on the site (so in the main screen the different shows/movies, and in them the different episodes etc). There are 2 ways I see to approach this:
1) A generic solution. This means it would work for all websites, and may be a page with javascript that loads the required webpage into a frame or something similar, or it may be a chrome extension.
2) A site specific option. So code written just to be run on the netflix page and could be run from something like CJS (https://chrome.google.com/webstore/detail/custom-javascript-for-web/poakhlngfciodnhlhhgnaaelnpjljija?hl=en).
I think one of the hardest things would be to work out where elements are on the page to be able to go left/right as well as up/down.
Any ideas?

Force console to be open on load within iframe - chrome

I am trying to create some simple tutorials, which involve people using the console in chrome. Ideally I would like to build them in a codecademy style - so instead of saying 'browse to this element in the console' and the user having to go to a separate demo page and do this, it would be built into one page.
So, I would have the tutorial, and then an iframe containing the demo page. I need the console to be open in the iframe page (and stay contained within it), but still be usable.
I know in chrome you can change which iframe you are viewing in the dev tools, and if needs be I will simply instruct users to do that, but I feel it would be more effective / smoother if the console was actually within the iframe and was automatically there.
Is there any way to do this?
Thanks in advance.

Modify webapp fullscreen bookmarklet for iPhone 5

How is it possible to modify this bookmarklet which activates the webclip app-mode so that iOS will display it in 4 inch fullscreen?: http://cl.ly/text/1H1b3E3K3T0V
I've already read about the changes you need to make in html when optimizing a page but I didn't get it right with this script.
I suspect that adding the meta tag "apple-mobile-web-app-capable" after the page had loaded is not going to work. Safari is likely not expecting this to change after the fact and therefor is not watching for a change. In other words, I would predict that you can't use a bookmarklet to do what you are trying to do in such a direct manner.
I suspect that adding the "apple-touch-startup-image" will work because Safari is not checking for this information until the user chooses to create a home screen shortcut.
As a possible work around to the problem, you might consider is somehow trying to recreate the page using the modified HTML. The bookmarklet might modify the DOM like above, then create a new blank tab with window.open() and set its contents equal to the current document.documentElement.outerHTML. This is just a suggestion off top of my head and I have not tested it.

Can a piece of code be dynamically placed on every webpage a user visit

So we have a program that the user can use by copying text from a webpage they visit, alt+tabbing to the program, then pasting it as input. It would be more convenient for users to be able to do it directly in the site.
We were thinking of a panel that would be small and expandable, following them to each site they visit. Is this possible? Either a snippet of code that is auto pasted, or a JavaScript command called that would dynamically paste the code (is Scratchpad any help here, at least in FireFox).
We've never made a FF add-on, but it seems like if the dynamic panel idea falls through, an add-on would be the next best thing.
Basically, users should ideally be able to copy text, either enter a key combo or click a button, see the interface and paste in the text. Would either of these methods work?
A browser add-on or a userscript could certainly do this.
You can also write a userscript and use a user script compiler (such as this one) to convert it to a "true" Addon.
Alternatively your application could act as a HTTP proxy and inject it dynamically, but I'd guess that this would probably be more complicated than the other two approaches.
This site Polyvore used to do something similar, although in the 2 mins hunting around I could not find it, but I have used it and I think the technique was used by Google and Digg for a while. From what I recal it involved iframes and a bookmark in your browser.
Basically you could download a small piece of code that would sit in your bookmarks bar and this would allow you to navigate to a fashion website click on the bookmark copy a picture and insert it back into Polyvore.

Categories

Resources