How do I implement Cross Domain URL Access from an Iframe using Javascript?

在进行跨域 URL 访问时，通常是因为出于安全考虑，浏览器实现了同源策略（Same-Origin Policy），该策略阻止了一个域的脚本与另一个域的资源进行交互。这意味着从一个域中的iframe直接访问另一个域的文档对象通常是不被允许的。不过，有几种技术可以用来解决或绕过这一限制：

1. 文档域设置 (document.domain)

如果两个具有相同主域但不同子域的页面需要相互通信，可以通过将 document.domain 设置为相同的值来允许这种通信。例如：

javascript
// 在页面 A (http://sub1.example.com)
document.domain = "example.com";

// 在页面 B (http://sub2.example.com) 的 iframe 中
document.domain = "example.com";

设置完成后，这两个页面即可绕过同源策略进行交互。

2. 使用窗口间的消息传递 (window.postMessage)

window.postMessage 方法允许安全地实现跨源通信。使用这种方法，可以发送消息到另一个窗口，不论这个窗口是否属于同一源。这是一种安全的方式，因为接收消息的窗口可以验证消息来源。

javascript
// 在发送消息的页面
var iframe = document.getElementById("myiframe");
iframe.contentWindow.postMessage("Hello there!", "http://targetdomain.com");

// 在接收消息的页面
window.addEventListener("message", function(event) {
    if (event.origin !== "http://yourdomain.com") {
        return; // 验证来源
    }
    console.log("Received message: " + event.data);
}, false);

3. 服务器端代理

如果客户端脚本由于同源策略的限制不能直接获取数据，可以通过服务器端代理来间接获得数据。即前端向自己的服务器发送请求，由服务器去请求其他域的资源，然后将结果返回给前端。

这种方式需要服务器端的支持，通过服务器向目标 URL 发送 HTTP 请求，然后将响应转发给原始请求者。

4. CORS (跨源资源共享)

CORS 是一个 W3C 标准，允许服务器放宽同源策略的限制。如果目标域的服务器设置了适当的 CORS 头部信息，那么浏览器将允许跨域请求。

例如，服务器可以添加以下 HTTP 响应头：

http
Access-Control-Allow-Origin: http://yourdomain.com

这将允许来自 http://yourdomain.com 的前端代码通过 AJAX 直接访问该资源。

总结

解决跨域问题的方案应根据实际需求、安全性和易用性来选择。例如，简单的子域间通信可以使用 document.domain，而更复杂的跨域应用则可能需要 postMessage 或服务器端的解决方案。在任何情况下，安全性都应被放在首位。