在div内加载外部网址，例如Google搜索

Question

I want to load external websites inside div and make it a bit smaller to accommodate inside div more properly.
just like Google search do

---

I tried this:

$("#targetDiv").load("www.google.com");

but it is not working.

I tried iframe but it has still 2 problems:

1. scrolling is still enabled by pressing arrow keys & PGUP PGDOWN
2. how to make contents inside iframe smaller

---

Don't know which method i should use
which is more optimized
or any alternative?

Answer 1

What you're trying to do is not going to work. Unfortunately, JavaScript isn't allowed to make cross-domain requests for security reasons (reference: http://en.wikipedia.org/wiki/Same%5Forigin%5Fpolicy ).

If you create a script written in PHP that resides on your own server that submits the request, that could work but the user wouldn't have a valid session and there's a risk that the URL (links) from the other site won't work if they're relative.

Example:

$('#targetDiv').load('load.php?url=www.google.com')

You could also have a look at jquery-crossframe . I've never used it but it claims to do what you're looking for.

The best option is to use an iframe element.

Answer 2

You are not going to be able to load a cross domain ajax call like that with jquery. from http://api.jquery.com/load/

Additional Notes: Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.

If iframe is not an option you can retrieve the data via an ajax call to a php page using curl.

Answer 3

Francois is right in that your ajax requests are restricted to same origin policy. That means you cannot load contents from other websites directly. What your are trying to achieve, however, is possible if your source supports JSONP . If you want to specifically load google search engine results check out Google Custom Search API