Is it possible to get <div> Content from a another Site and put it with JS in the currect Site?
Example:
Website 1 have a Portal and want include Content from Website 2.
Website 2 have in <div id="content"></div> the required Content.
Website 1 will get the Content with JS and put it into <div id="content_here"></div>
No, this is not possible via javascript. Any request made via javascript must made be to the same domain as the originator. This is a security feature of most browsers known as the Same Origin Policy.
The only work-around is to scrape the source of the external domain via a server-side language, such as PHP or ASP.Net and then make the AJAX request to that locally.
IF website1 & website2 from maches the same origin policy then you can access the Iframe from the JS, if you have access to both of the websites you can pass the origin policy by using JSONP for example appendHtml(html) otherwise no you cant (as fast ideas came into my mind)
hope this helps,
Related
I have been given an address with a basic HTML structure, it just has some numbers in it. I have tried doing it as an Iframe, if I create a simple HTML that does work fine, but in the page itself if i hover over the iframe it says that it refused the connection.
I have tried with AJAX, but it does give me a mixed content error, since my page where I want the content inserted is secure (https) and the page where the numbers are is not.
Is there any workaround I can do in this case?
Thank you in advance.
this is because of CORS(cross domain access) problem:
if you are accessing the URL on same domain there won't be any problem but if you accessing content of another domain there is security issue.
this is possible only by below concepts:
Enabling CORs - https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Image pinging concepts - limited to data size
JSONP
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?
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.
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 (e.g. 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.
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/
P.S.: this assumes you are working with a CORS-enabled site.
Is it possible to load an external website using .load function?
<div id="new"></div>
<script language="JavaScript">
$(document).ready(function(){
$("#new").load("http://omn.orgfree.com/");
})
</script>
Thanks!
Due to browser's same origin restrictions, you cannot load content with ajax from other domains.
You could display that content in an iframe or you could use a server proxy in your own domain to fetch the content for you.
It depends on your expectations. If you want to maintain the capability to traverse and manipulate DOM of the loaded page, then the short answer is "no" due to cross-domain security policies.
You could still commonly integrate the content by using an iframe or a more compliant <object data="http://omn.orgfree.com/" type="text/html" />, and there are protocols like window.postMessage allowing client-side cross-domain communication. Integration has to be done by both parties though.
Again, assuming that the other party is available to assist with integration or you have direct control over the other domain's content, you could use JSONP with ajax requests - technically any html could be serialized that way.
I don't think so. User can load only those web pages that are within its directory.
However this feature can be achieved through server side methods(in case of c#).
I want to load a whole site into a div. When I use
$(document).ready(function(){
$('#result').load('http://www.yahoo.com');
});
It's not working.
It will be a cross domain call to do using javascript. You can use iframe to load.
Check this link for possible solutions.
This is a cross-domain issue.
You can create a proxy on your server to fetch the data and you'll load it from your own domain.
What do you mean "a whole site", if you mean a given page, then it'll probably require all manner of header included files, which are not suitable to go in to the body of your page.
You would need to use an IFRAME, just create the IFRAME element and set the source to the URL you want.
Although I'm not sure about your use case of loading "whole" site into div - you are limited by "same domain" security policy, in order to make cross-domain AJAX calls you need to employ JSONP call http://api.jquery.com/jQuery.getJSON/
You can't do that unless the content you're loading comes from the same domain as the site you're loading it into, due to JavaScript's Same Origin Policy.
Your alternatives:
load the content into an iframe
pull the content server-side via an HTTP get, and the write it out to your page
Beware of licensing issues with the second option if you don't have permission to use the content, though!
Is it possible to read and parse the dom elements of third party websites like cnn.com (for e.g) so that I can get the div, a, p tags and read the position and size information?
jquery can parse and show information of the web page where your javascript code is running but if we provide an external web page to the .load command, can we parse the third party website page and read the DOM tree?
Thank you
No, you will be blocked by the Same Origin Policy, which restricts one site from accessing another on a different domain. You could set up a server-side script, in your preferred language, which would fetch the website on behalf of your JavaScript code, but this is more complex than just using AJAX to request the page.
I think you cannot access other domains' content with javascript due to security reasons. At least in secure browsers...