I've been messing with YouTube lately, but the search bar confuses me.
If I search something long, like "a;sldjf;asbybytyeu2430572735gljahflg", then control-f in the DOM, the only reference I can find to the search term is in the page title.
Even when I look at the 'input' element of the search bar, it doesn't have a 'value' property.
My question is this: How can the browser display text that doesn't appear anywhere in the DOM? Where is the data stored?
It is in the URL query string. For example, if I search "dank memes", this is the URL:
https://www.youtube.com/results?search_query=dank+memes
It can be accessed by JavaScript with window.location.search which in this case would return "?search_query=dank+memes"
But most likely YouTube's JavaScript code does not access it and it is only used to send the information for a GET request to the server. Then the server will display all the needed information.
Related
I am working on a html page with an input bar. How can I get the form data from this page to another html page with a iframe? Because I need to embed the search result from other site but I want to show on my site new page. I just guess should use iframe. But I don't know how to get data and add in page address field.
You have several options here:
1) If your form uses GET method, then all the text data from the form will be passed to next page (which is set up as an "action" attribute of the form) in URL (like www.example.com/?name=John&lastname=Doe). After that, you can extract data from this URL using code from this StackOverflow question and put it inside HTML element using Javascript as well like it is done here
2) Whatever server language you use, you can get query variables from there and put them to the page before sending it to the client. In case of PHP, check this example. NB: don't forget about security.
3) You can temporarily store text in localStorage API of the browser. Simply set the value before submitting the form and then get it on the next page.
iFrame would be inefficient and not needed here.
I am trying to copy a link from this site (stack overflow), but I like the link to include a hash so when someone clicks on the link they go directly to the answer I would like them to see. How can I find the hashes in a page?
Example:
http://www.blahblah.com/index.php#label
How can I know there is a #label, and how to find it?
The value of the hash is simply the ID attribute of any element in the page.
You can see them in the source or the DOM inspector.
Are you looking for something like this?
var hash = window.location.hash;
There might not be a simple answer for your here. In a pure HTML context (i.e. excluding javascript functionality). The has would reference an anchor on the page like this:
<a name="label"></a>
So you could just look for named anchors.
Now, if you are talking about javascript functionality it gets much more complex. Via javascript you can use a hash tag like that and make it do any number of things (like show a hidden element with id="label", download some content asynchronously based on that hash, etc. So there might not be an easy way to determine allowable values.
For example:
http://www.example.com/index.html#foo?key=value
When page is loaded, it goes to the bottom of the page. Any clue?
In HTML5 you just need to set the hash to an ID of any DOM node on the page and it should move the page down in the same way as old style page anchors.
Anything after the hash can only be accessed by JavaScript so if you want to get the value of key you will need some JavaScript to do so.
EDIT: Here is a good tutorial for storing and retrieving several attributes from the hash string - http://www.parorrey.com/blog/php-development/get-url-hash-parameters-values-using-javascript-for-php-_request/
You can read about anchor tags but you querystring is the wrong side of the hash. It should read:
http://www.example.com/index.html?key=value#foo
So I'm working on a web app, and I want to filter search results.
A nice restful implementation might look like this:
1. mysite.com/clothes/men/hats+scarfs
But lets say we want to ajax up the filtering, like the cool kids, and we want to retain deep linking, we might use the anchor tag and parse that with Javascript to show the correct listings:
2. mysite.com/clothes#/men/hats+scarfs
However, if someone clicks the first link with JS enabled, and then changes filters, we might get:
3. mysite.com/clothes/men/hats+scarfs#/women/shoes
Urk.
Similarly, if someone does not have JS enabled, and clicks link 2 - JS will not parse the options and the correct listings will not be shown.
Are Ajax deep links and non-Ajax links incompatible? It would seem so, as servers cannot parse the # part of a url, since it is not sent to the server.
There's a monkeywrench being thrown into this issue by Google: A proposal for making Ajax crawlable. Google is including recommendations for url structure there that may give you ideas for your own application.
Here's the wrapup:
In summary, starting with a stateful
URL such as
http://example.com/dictionary.html#AJAX
, it could be available to both
crawlers and users as
http://example.com/dictionary.html#!AJAX
which could be crawled as
http://example.com/dictionary.html?_escaped_fragment_=AJAX
which in turn would be shown to users
and accessed as
http://example.com/dictionary.html#!AJAX
View Google's Presentation here (note: google docs presentation)
In general I think it's useful to simply turn off JavaScript and CSS entirely and browse your website and web application and see what ends up getting exposed. Once you get a sense of what's visible, you will understand what most search engines see and that in turn will show you what is and is not getting spidered.
If you go to mysite.com/clothes/men/hats+scarfs with JavaScript enabled then your JavaScript should automatically rewrite that to mysite.com/clothes#men/hats+scarfs - when you click on a filter, they should be controlled by JavaScript meaning you'll only change the hashtag rather than the entire URL (as you're going to have return false anyway).
The problem you have is for non-JS users going to your JS enabled deeplinks as the server can't determine that stuff. Unfortunately, the only thing you can do is take them to mysite.com/clothes and make them start their journey again (as far as I'm aware). You'll need to try and ensure that when people link to the site, they use the hardcoded deeplink rather than the hashed deeplink
I don't recommend ever using the query string as you are sending data back to the server without direct relevance to the prior specified destination. That is a corruptible security hole as malicious code can be manually added to the query string to cause a XSS or buffer overflow attack at your webserver.
I believe REST was intended to work with absolute URIs without a query string, because then your specifying only a location of a resource and it is that location that is descriptive and semantically relevant in addition to the possibility of the resource being so equally relevant. Even if there is no resource at the specified path you have still instantiated a potentially unique and descriptive location that can be processed accordingly.
Users entering the site via deep links
Nonsensical links (like /clothes/men/hats#women/shoes) can be avoided if you construct your Ajax initialisation code in such a way that users who enter the site on filtered pages (e.g. /clothes/women/shoes) are taken to the /clothes page before any Ajax filtering happens. For example, you might do something like this (using jQuery):
$("a.filter")
.each(function() {
var href = $(this).attr("href").replace("/clothes/", "/clothes#");
$(this).attr("href", href);
})
.click(function() {
update_filter($(this).attr("href").split("#")[1]);
});
Users without JavaScript
As you said in the question, there's no way for the server to know about the URL fragment so filtering would not be applied for users without JavaScript enabled if they were given a link to /clothes#filter.
However, even without filtering, these links could be made more meaningful for non-JS users by using the filter strings as IDs in your /clothes page. To prevent this messing with the Ajax experience the IDs would need to be changed (or the elements removed) with JavaScript before the Ajax links were initialised.
How practical this is depends on how many categories you have and what your /clothes page contains.
Ive used WindowsHost to host a WebBrowser control, and that has allowed me to access the WebBrowsers Document/DOM directly, t read HTML content via mouse clicks on HTML document elements and also to invokes on submit forms. I never found a way even in Net 3.5 to do this when I was searching at the time. Ive found this post http://rhizohm.net/irhetoric/blog/72/default.aspx and it looks like through som magic casing you can expose the dom. BUT My question is, has any one done this, and is it possible once you get the dom to do Invokes to submit contect to html forms and also get HTML elements via mouse click events????
Anyone tried? and was able to do both?
Thanks
I'm using WPF.
add a reference to:
Microsoft.mshtml
then:
var doc = ( mshtml.HTMLDocument )_wbOne.Document;
and this gives you the raw string:
doc.documentElement.innerHTML
in return, if you know how to get information out of the HTML document, i'd appreciate it.
for example get all the s and and the metas and whatever else might be gettable so i can get the information from them? i don't want to dink around with the html, just get the info from them...:-)