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!
Related
I want to make some changes to the HTML document inside the iFrame which is coming from another domain, as an example, the document inside the iframe open links to target="_blank" and I want to change that target to another value before it's renders to the client's browser.
I always hit CORS Cross-origin resource sharing, I know this is against security purposes but my application is just a prototype for concept proofing.
I also tried to make it programmatically from the code behind the HTML by storing html content to a variable then pushing the contents after changing to a temporary HTML page, but have the same problem rather than faulty page that require some resources on the external source.
Does anyone know a solution or an out of the box idea that can overcome this issue?
You cannot do it just with a browser, no; as you mentioned, it runs afoul of the Same Origin Policy. (Well, you could with a browser extension, but I'm assuming you're talking about something that would run in a normal environment without additional installation.)
You could do it by involving a server: Have your iframe use a URL on your server, and have the server fulfill requests for that URL by querying the third-party server for it and then relaying the result.
But not without something in-between like that.
Using JavaScript/jQuery within a web page, I need to load a different page into an iframe. I am doing it by finding the iframe using jQuery, and setting its src property, thus:
iframe.src = url;
Which works in that it displays the page in the iframe, but I need to attach a couple of cookies to that request to get the correct info on the page, and I can't figure out how to do that.
In the spirit of trial and error I tried inserting this line before the above code:
$.cookie("MyCookieName", "MyCookieValue");
but in Fiddler I see no cookie attached to the request. All the documentation I can find about cookies tells me how to generally get & set the values, but doesn't help explain what I'm doing wrong.
For what it's worth, the page that I'm loading into the iframe is in the same domain as the page hosting this JavaScript code.
How do I attach cookies to that query?
How do I attach cookies to that query?
You can’t “attach” cookies to a simple HTTP request that the browser makes on his own.
For what it's worth, the page that I'm loading into the iframe is in the same domain as the page hosting this JavaScript code.
Then set the cookie for that domain the normal way – once it’s set, the browser will send it when requesting the iframe URL automatically.
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#).
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...
I have a JS file that puts an iframe on every site its on.
both the JS and the iframe location comes from the same domain, mine.
Can I somehow communicate from within the iframe to the outside script,
which isn't running on my domain, but is called from it?
I know about JSONP but i'm looking for a better way if possible
It's very simple. The location of the document needs to be served from the same domain as the location of the script. Otherwise, the script will get "Access Denied" error.
If you are supplying a script for other people to use, then you could have them load easyXDM which would allow your script to communicate with the document loaded in the iframe (if it also has the easyXDM library set up).
You would also have to require them to host a simple html file on their domain in case easyXDM cannot use postMessage and has to resort to using the hash/fragment solution.
Demos of this can be viewed here