I have read several articles in this area before, but I have not found a proper solution.
You can use the XMLHTTP component or IFRAME to obtain data from the same domain. This is simple because there is no cross-origin access permission problem.
However, to access data in different domains, XMLHTTP does not have the permission to obtain data due to browser security settings, and IFRAME does not have the permission to pass the obtained data to the parent window, there seems to be no other solution.
The methods mentioned on the Internet are similar to the following:
1. If the data to be obtained is located in the same root domain but different subdomains, you can specify document. domain as the parent domain in the script.
2. if the data to be obtained is located in different root domains, you can write a script on the server as a proxy, and the script on the server gets data from different domains, then it is passed to the webpage in the same domain.
The above two methods can easily be thought of. Now the question is, if you want to obtain data from a different root domain, how can we achieve this?
Generally, we do not randomly obtain data on the Internet. We usually obtain data from a specified server, such as Google Maps, Google Adsense, and referer, it is generally provided to users in the form of scripts. At this time, if users are required to write a proxy on their own servers, the ease of use will be greatly reduced. You will consider writing proxies for various scripts for users, such as PHP, ASP, Python, Perl, etc ......, However, what should I do if this server does not support dynamic scripts?
After thinking about this problem for two days (except for less than two hours at work), I once considered using browser vulnerabilities. However, this cannot be done for a long time, so I gave up. Then I found that the map data searched locally by Google came from mapabc.com. What do they do?
The Dom viewer of Firefox shows that the map area is an IFRAME. Is it implemented using IFRAME? But how do I know which images to download when dragging a map? These data must be obtained from the server. Is the server where the data is stored in Google.com? It should not be so troublesome.
The Google Maps API is opened immediately. The example webpage provided by the official website is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
Put http://maps.google.com/maps? File = API & V = 2 & Key = abcdefg:
GScript("http://maps.google.com/mapfiles/maps2.67.api.js");
This is used to load the map operation library. The gscript function is defined:
function GScript(src) {document.write('');}
Epiphany ......
Scripts that reference different domains on the webpage do not prompt insufficient permissions. By the way, it is true!
In fact, I should have thought of this method. It may be because I haven't played JavaScript for too long. Whether it is Referer or Google Analytics, to collect page access information, you must submit the information to the server using a script, but they only submit the information once (Google Analytics has a statistical stay time and should have several times ). Traditionally, I separated the submission and download data, so it is not easy to think of this method.
However, using document. Write is never a good solution. It will clear the original content on the page. You have already thought of the improvement method. You can refer to the idea in the article "effectively organizing complex JavaScript scripts on pages" that I wrote a long time ago.
Continue to analyze the code of Google Maps. Open http://maps.google.com/mapfiles/maps2.67.api.js with this Code:
ta.prototype.Hk=function(a,b){var c=this.ql(a);if(c){window.setTimeout(function(){b(c)},
0)}else{var d="__cg"+Zf++ +(new Date).getTime();try{if(this.qe==null){this.qe=document.getElementsByTagName("head")[0]}var e=window.setTimeout(sd(d,b,a,403),15000);if(!window.__geoStore){window.__geoStore={}}window.__geoStore[d]=Jf(this,d,b,e);var f=document.createElement("script");f.type="text/javascript";f.id=d;f.charset="UTF-8";f.src=this.vl+"?q="+window.encodeURIComponent(a)+"&output=json&callback=__geoStore."+d+"&key="+this.Lh;this.qe.appendChild(f)}catch(g){if(e){window.clearTimeout(e)}window.setTimeout(sd(d,
b,a,500),0)}}};
The Script node is also dynamically created to avoid problems caused by document. Write.
The solution is found. Now let's test it briefly:
1. Create a new page on the local server.
Test.html:
<title> Over-Domain Data Fetching Test Page</title>
<script type="text/javascript">
var lastScript;
var h=document.getElementsByTagName("head")[0];</code>
function loadScript(url){
var f=document.createElement("script");
var d=new Date().getTime();
f.type="text/javascript";
f.id=d;
f.src=url+'?'+d;
h.appendChild(f);
if(lastScript&&g(lastScript))g(lastScript).parentNode.removeChild(g(lastScript));
lastScript=d;
}
function g(x){return document.getElementById(x)};
</script>
<body>
<button onclick="loadScript('http://localhost/alert.js')">Test Alert</button><br />
<button onclick="loadScript('http://localhost/info.js')">Get My Info</button><br />
My Name: <input id="myname" type="text" value="" /><br />
My Blog: <input id="myblog" type="text" value="" />
</body>
Two key points are explained:
1. lastscript is used to store the ID of the last created Script node. When you create another Script node next time, you need to delete the last created node to avoid loading more scripts and occupying too much memory.
2. A value D is added to the URL to prevent the browser from caching script data. In this example, the value D is not added. However, if the script is dynamically generated by the server, it is best to add it.
Then create two JavaScript scripts for testing:
Alert. JS:
alert('You can see me!');
Info. JS:
g('myname').value='Hily Jiang';
g('myblog').value='http://hily.iyi.cn/';
Put them in the root directory of the local server and type http: // 127.0.0.1/test.html so that it is not in the same domain as localhost.
Click "test alert". The displayed dialog box is displayed !.
Click "Get my info" to display my information in the text box.
(The above test pages are passed in IE 6.0 and firefox1. 5.0 .)
Well, it's not too early. Go to bed ~
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
