另一个网站/跨域上元素的 Xpath

Question

I want to get the XPATH of an element on a website (my own domain), which I got it using JavaScript code as mentioned in this answer.

Now what I want to click on button which will open a url (cross domain) window and when user click on an element on that window it's XPATH is captured.

I tried doing the same using iframe with no luck.

Now my question is there a way to get the XPATH of an element of another website / Cross domain ?

Answer 1

Sorry this is not possible without cooperation from the other (x-domain) site. Browsers are designed not to allow access to the DOM of x-domain documents ( iframe included) for security reasons.

If you had cooperation from the other site, they could load your javascript file and then use postmessage to pass the xpath to the original page.

Other options would be to create a bookmarklet users could use on the other page, or a browser extension (Chrome and FF are pretty easy to develop for)... depends on your use case.

Answer 2

From your comments, I've gathered that you want to capture information from another website that doesn't have Access-Control-Allow-Origin headers that include your domain (eg the other site does not have CORS enabled). This is not possible to do cross-domain and client-side due to the Same-Origin Policy implemented in most modern browsers. The Same-Origin Policy prevents any resources on your site from interacting with resources on any other site (unless the other site explicitly shares them with your site using the Access-Control-Allow-Origin HTTP header).

If you want to get information about another site from your site, there is no way around using server-side code. A simple solution would be to implement a server-side proxy that re-serves off-site pages from your own origin, so the Same-Origin Policy will not be violated.

Answer 3

You may get the data using jQuery's load function, and append it to your page.

From there, the DOM nodes from your external page should be accessible for your processing.

$('#where-you-want').load('//example.com body', function() {
    console.log($('#where-you-want'))

    // process the DOM node under `#where-you-want` here with XPath.
})

You can see this in action here: http://jsfiddle.net/xsvkdugo/

PS: this assumes you are working with a CORS -enabled site.