How can i get DOM of specific page like "google.com"? - javascript

for this problem I need to say I use fetch method but some web, like google and ..
does not allow it.
I want to get DOM of a page for tracking it, for example : I wanna check if an element change let me know.
How can I get an specific web page DOM without exception, like: google in using fetch method?
If you have another solutions, may you tell me (With Java script)?

TLDR; You don't
You can insert a page via <iframe>, but it won't (for security reasons) let you access any of its data, thus nor the DOM.
You can't fetch the HTML of google.com either, it is because Google doesn't want to give you the HTML... You can, however, create a proxy server, because a nodeJS server can fetches the HTML of google.com. But then it will be simple HTML yet to be parsed...

Related

Query while typing in a textbox like Netflix

When you search using the textbox in netflix.com, the URL updates automatically on what you type. It changes to something like https://www.netflix.com/search?q=test. The results also updates automatically or in real time.
I would like to know how this was done. Not the DB query part but more of the real-time/automatic update of the results with the use of GET functions. I was wondering if this could be done using Node.js, and javascript? Where should I get started?
Kind of related but not important: I saw this question with a fiddle code but didn't contain DB query and not updating the URL.
question
All of this is JavaScript, but specifically there are two parts to this.
For the first, the fetching of fresh data, this is done via the Fetch API. (Or on older sites, XHR/AJAX.) Using this API, the client-side JavaScript can make an HTTP request to the server and read the response. What is used server-side (like Node.js) isn't important... most anything can be used for this. (Node.js though is awfully convenient... it's my preferred method, but it isn't a requirement that you use it.) With the response data, it's parsed and injected into the page however the script wants to do it.
The second part you're asking about is the URL change. This is often done with the History API. That way, the developer can control what the URL says. This allows the user to bookmark this particular page for later use.

Get an element from another page

How to get an element (opening and closing times) from this site https://www.costco.com/warehouse-locations/brooklyn-NY-318.html using javascript and display it on another page?
element = document.getElementsByClassName('core')[0].firstElementChild.childNodes[0].data
Thanks
Unfortunately, if you plan to do this with purely browser-based Javascript, CORS will likely stop you from requesting the page and pulling the data there. You can try looking for an API that Costo provides, or some other online tool that can get you that information that supports cross-origin requests.
The other solution is to create your own server script. Having a back-end like NodeJS pull the page with packages like axios and passing the resulting string over to jsdom. This way, you can run the same element script you wrote to get the data you were looking for. I can elaborate but I'm just not sure if Google Sites has this capability.

Simplest way to display API results

Im kind of new to this and looking to expand pulling API results and displaying them on page, whether it's from a blog resource or content generation.
For example, I want to pull from VirusTotal's API to display returned content. What is the best way to capture that in an input tag and display it in a DIV. And what if it were an option to pull from different API's based on drop down selection?
An example of the API to pull content would be here https://developers.virustotal.com/reference#api-responses under the /file/report section.
To call the data from the API, you need to send a request. However, there is a problem with CORS. Basically, you can't call the website from inside your web browser from a page on your local machine, because your browser blocks the request. The web browser will only allow calls to and from the same server, except for a few exceptions.
There's two ways to approach this.
The simplest one is to make a program that calls the API and outputs an HTML file. You can then open that HTML file to read the contents. If you want to update the info, you would need to run that program once again manually. You could easily do this building off the python they provided.
The other, little bit more complex way, is where you host a server on your PC. When you go to the webpage on that server, it sends a request to the website, and then provides the latest information. There's tons of frameworks and ways to do this. For an absolute beginner on this subject, ExpressJS is a good start. You can make a hello world program, and once you do that you can figure out how to call the API whenever a page is loaded, and display the results.

ColdFusion - Detect top window

is there a function in ColdFusion that detects whether or not a browser window is the top window? (Similar to (if (window == window.top)) in JavaScript)
The reason I ask is because I would like to make certain page elements present when the page is directly accessed by the user, and not present if my page is iframed.
CFML code runs on the CF server, whereas any considerations about browser windows obviously run on the client. CF is completely unaware of the UI configuration of the client system, all it sees is "a request". Indeed the requests don't even come from the client, they come from the web server which acts as a go-between for CF-serviced requests: CF has no interaction with the client itself.
The only information the web server gives to CF that in any way relates to the client browser is some of the stuff in the CGI scope, and obviously that's limited. And none of it relates to the configuration of browser windows / iframes.
You will need to solve this with Javascript (which I will add to the tags of your question).
To trigger different code to execute on CF given a certain browsing situation, you are going to need to use Javascript to add some information to the request to identify the situation to CF. This could be adding a parameter on the query string, or something like that.
If someone was 'wrapping' one of my products I'd want to know who and how so I could improve the experience for the user and the site owner. With that in mind, what I would do is automatically break out of any frames by default. I would then create a simple api and provide instructions to other webmasters on the proper way to include your content. Display different content once you've determined if your content is PROPERLY being included in another site. For webmasters that want to include your content:
Provide recommended height/width for the iFrame so you can
include your logo or ads with the content.
Provide anything you want them to include in the query string to help track usage.
You could even add fun stuff to your api to make your content look more integrated into the including website like reacting to url.bgcolor or url.bgimage.
You could go as simple as looking for and recording the value of some url variable like url.remoteSiteAddress or as complicated as registering the site and providing unique key. Of course there are other considerations to take into account to enforce the key. Being that you don't really care that the content is being displayed on a remote site, I suspect just recording a simple url variable is more your speed.
If a different website is putting your page in an iframe on their website, then you could use the CGI.HTTP_REFERRER variable to check if the website domain is yours or not, and load content as desired.

How to access Facebook user ID from javascript within a fb:iframe?

I am writing a Facebook application that is a simple board game which I have implemented in javascript. Facebook only seems to let javascript applications run within an iframe so I am loading the page using <fb:iframe>. I just want to be able to tell the javascript the user's id so I can tell the user if it is his turn or not but I can not find documentation on accessing facebook data from within the fb:iframe. I am probably missing some basic conecpt as I do not understand the facebook API very well.
Facebook's API is very tough to follow, and the documentation is very poor. You're right about the Javascript... normal Javascript only works inside an iframe on Facebook, otherwise you're limited to a subset of filtered Javascript called FBJS. You can safely ignore anything about FBJS in the documentation, and focus on iframes.
Iframe loading
The first thing I would mention is that an <fb:iframe> tag actually gets rendered with a ton of stuff in the src attribute. So if you put a tag like this into your Facebook page: <fb:iframe src="http://example.com/page?x=y">, what it ends up becoming when it loads into a user's browser is more like this:
<iframe src="http://example.com/page?x=y&fb_sig_in_iframe=1&fb_sig_locale=en_US&fb_sig_in_new_facebook=1&fb_sig_time=1246340245.3338&fb_sig_added=1&fb_sig_profile_update_time=1242155811&fb_sig_expires=1246345200&fb_sig_user=000000001&fb_sig_session_key=2.d13uVGvWVL4hVAXELgxkZw__.3600.1246345200-000000001&fb_sig_ss=mZtFjaexyuyQdGnUz1zhYTA__&fb_sig_api_key=46899e6f07cef023b7fda4fg2e21bc58&fb_sig_app_id=22209322289&fb_sig=bbc165ebc699b12345678960fd043033">
Facebook adds a ton of stuff to the src. The parameter that tells you the user's Facebook id is fb_sig_user (which is 000000001 here). I'm assuming your app is set up as an "FBML app", since you probably wouldn't use an <fb:iframe> tag in an "Iframe app". Nonetheless, the rendering method is similar in both cases, and you get a bunch of extra stuff to your src document in an "Iframe app" as well.
This really only passes you the Facebook user id on the first load of the iframe, however. Subsequent operations within the iframe won't have access to that user id unless you pass it around explicitly.
Facebook Connect
If you want to interact with Facebook from within the iframe, that's where the Facebook Connect Javascript libraries comes in. The best instructions on setting up Facebook Connect is probably this wiki page, but it's still a bit murky. Facebook Connect can be used for both completely external sites, or just regular content inside an iframe. You fall into the latter category, so if you follow the instructions in that link and use the first line of code in step 2 (for the FeatureLoader), you should be ok.
Once you've included the FeatureLoader.js script and called FB.init, you should generally be up and running with FB Connect. You should be able to interact with the API from then on out. The users.getLoggedInUser() method will give you the current user id inside the iframe via Javascript.
Hope that helps.
Note that as of March 2011, FB is moving to POST requests to load iframes. It sends a form action with method="post" and target="iframe_canvas", plus an input type="hidden" with a "signed_request"
You cna use the facebook API to get the user ID by calling
Users.getLoggedInUser
You can access that value, then use echo() to add that to your HTML as a javascript variable, which will make it available to your Javascript code.
Try Env.user, it has the logged in user's ID.

Categories