Comprehensive JavaScript Cross‑Domain Guide with Demo

This article provides a detailed, demo‑rich guide to JavaScript cross‑origin techniques, assuming the reader is familiar with the same‑origin policy.

1. JSONP

JSONP bypasses same‑origin restrictions by loading a <script> tag that can fetch JavaScript from any domain. The server returns a script that calls a pre‑agreed callback function with the data as an argument.

Example (index.html):

<script> function getWeather(data) { console.log(data); } </script> <script src="http://x.y.com/xx.js"></script>

The remote file (xx.js) contains:

getWeather({ "城市": "北京", "天气": "大雾" });

When the script loads, getWeather is invoked and logs the object.

2. document.domain

When two pages share the same top‑level domain, you can set document.domain to that common suffix (e.g., example.com ) so that their window objects become accessible to each other.

Requirements:

Both pages must have a reference to each other's window object.

Top‑level domain must be the same.

Protocol must be the same.

Port must be the same.

Example using Baidu subdomains:

document.domain = 'baidu.com'; var otherWindow = window.open('http://zhidao.baidu.com/');

After setting the same document.domain in both pages, you can access otherWindow 's DOM, e.g., var divs = otherWindow.document.getElementsByTagName('div');

This technique is often used to control <iframe> content.

3. window.name

The window.name property persists across page navigations, allowing data to be passed between pages of different origins.

Example:

window.name = "My window's name"; location.href = "http://www.qq.com/"; // later on the new page console.log(window.name); // "My window's name"

It can also be used with an <iframe> by setting window.name inside the iframe page and reading it from the parent after the iframe loads.

For security reasons, window.name is always a string.

4. HTML5 postMessage

The window.postMessage method enables safe cross‑origin communication by sending a message object to a target window.

Signature:

windowObj.postMessage(message, targetOrigin);

Parameters:

windowObj : the receiving window.

message : can be a string or an object in modern browsers.

targetOrigin : the expected origin of the receiver, or "*" for any.

Example listener:

addEventListener('message', function(e){ if (e.origin == 'http://jasonkid.github.io/fezone') { var data = e.data; e.source.postMessage('Got it!', '*'); } });

The message event provides origin , data , and source properties for handling the communication.

Demo

Full source code and additional examples are available at https://github.com/JasonKid/fezone/tree/master/JavaScript/几种跨域方案详细解释 .