`

JS跨域之document.domain

阅读更多
浏览器在执行Javascript时,出于对安全性的考虑,禁止两个或者多个不同域的页面进行互相操作。

相同域的页面可以相互操作。 如在q515220999.iteye.com/blog/下的parent.html和child.html两个文件

1. parent.html
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=utf-8/>  
<title>parent</title>  
<script>  
    // document.domain = "iteye.com";  
    function parentFunction() {  
        alert('function in parent');  
    }  
  
    function callChild() {  
         /*  
            child 为iframe的name属性值,不能为id.
            因为在FireFox下id不能获取iframe对象  
          */  
        child.window.childFunction();  
    }  
</script>  
</head>  
<body>  
<input type="button" name="call child"  value="call child" onclick="callChild()"/>    
<iframe name="child" src="child.html" >  
</iframe>  
</body>  
</html>  


2.child.html
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=utf-8/>  
<title>child</title>  
<script>  
    // document.domain = "iteye.com";  
    function childFunction() {  
        alert('function in child');  
    }  

    function callParent() {  
        parent.parentFunction();  
    }  
</script>  
</head>  
<body>  
<input type="button" name="call parent" value="call parent" onclick="callParent()"/>  
</body>  
</html>
 
以上的子页面和父页面之间相互调用,点击按钮即可看到效果。 

当将child.html页面部署到http://q1.iteye.com/blog目录下,且将parent.html中的iframe的属性src设置为http://q1.iteye.com/blog/child.html
此时在浏览器中访问parent.html即可访问到对应页面,这样就可以模拟两个二级域名页面之间的调用了。
如果没有去掉document.domain 这行的注释,浏览器会报错。

接下来取消注释parent与child页面中的 document.domain 这行代码,发现JS可以相互调用了。
注:两个文件都需要这行代码。

document.domain是可以设置的。但由于安全方面的限制,也也并非可以给domain设置任何值。例如q1.iteye.com,那么只能将domain设置为“iteye.com”
 // 假设页面来自q515220999.iteye.com
document.domain = 'iteye.com';    // 成功
document.domain = 'q1.iteye.com';    // 失败
document.domain = 'baidu.com';    // 失败

以上方法可以实现同一个域名下两个二级域名页面之间JS的跨域相互调用。
分享到:
评论

相关推荐

    js设置document.domain实现跨域的注意点分析

    本文实例分析了js设置document.domain实现跨域的注意点。分享给大家供大家参考。具体分析如下: document.domain 用来得到当前网页的域名。 比如在地址栏里输入: 代码如下:[removed]alert&#40;document.domain&#41...

    Web前端黑客技术揭秘(Web2Hack.org)_(i)7.6.5 跨子域:document.domain技巧1

    `attack.htm`是攻击页面,其JavaScript代码设置了`document.domain='com'`,并创建了一个iframe指向`user.proxy.com/proxy/proxy.htm`,在iframe加载完成后注入`poc.js`。`proxy.htm`中也设置了`document.domain='...

    js跨域问题解决方案.

    JavaScript跨域问题,是Web开发中常见的一个挑战,由于浏览器的同源策略限制,JavaScript无法直接访问不同源的资源,这在实现某些功能时会带来不便。本文将深入探讨JavaScript跨域问题的原因、影响以及多种解决方案...

    跨域解决方案

    document.domain = 'domain.com'; ``` 在子窗口中也需要设置 document.domain: ``` &lt;script type="text/javascript"&gt; document.domain = 'domain.com'; ``` 这样,我们就可以实现跨域请求。 跨域是前端开发中...

    js跨域解决方案.docx

    ### js跨域解决方案 #### 一、问题描述与背景 在网页开发中,经常会遇到需要一个主页面通过`iframe`动态加载子页面的情况,并且希望根据子页面的内容自动调整`iframe`的高度,以达到视觉上的无缝对接。然而,当...

    PHP ajax跨子域的解决方案之document.domain+iframe实例分析

    在Web开发中,由于同源策略的限制,JavaScript无法直接在不同的域之间进行通信,这为跨域数据交互带来了挑战。然而,对于主域相同但子域不同的情况,可以通过设置`document.domain`属性来实现跨子域通信。本文将深入...

    javascript跨域访问的方法.docx

    JavaScript跨域访问是Web开发中常见的一种挑战,由于浏览器的同源策略限制,一个域上的脚本不能直接获取或操作另一个域上的资源。为了解决这个问题,开发者通常采用以下三种主要方法:1. 基于iframe实现跨域2. JSONP...

    JS跨域请求解决方案.docx

    document.domain = "domain.com"; var iframe = document.getElementById('iframe'); iframe.onload = function() { var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; if (iframeDoc...

    什么是跨域?跨域解决方法.docx

    跨域是指一个域的 JavaScript 脚本和另外一个域的内容无法进行交互的现象。这是由于浏览器的同源策略限制所致。同源策略是一种约定,它是浏览器最核心也最基本的安全功能。如果缺少了同源策略,则浏览器的正常功能...

    web跨域解决方案.docx

    document.domain + iframe 的设置是一种跨域解决方案。它的原理是设置相同的域名,来实现跨域访问。 ### 4. HTML5 的 postMessage HTML5 的 postMessage 是一种跨域解决方案。它的原理是使用 postMessage 方法来...

    跨域demo.rar

    - `document.domain`只能设置为相同二级域名下的子域名,不能跨越顶级域名。 3. **解决跨域的常见方法** - **JSONP(JSON with Padding)**:通过动态插入`&lt;script&gt;`标签,利用script标签不受同源策略限制的特点...

    什么是跨域解决方案有哪些.docx

    3. document.domain + iframe 跨域 4. location.hash + iframe 5. window.name + iframe 跨域 6. postMessage 跨域 7. nginx 代理跨域 8. nodejs 中间件代理跨域 9. WebSocket 协议跨域 一、 通过 jsonp 跨域 通常...

    showModalDialog open弹出子窗口操作parent、opener父窗口及跨域处理

    3&gt; IE与FireFox对两个弹出窗口在跨域时的解析也有不同:通过window.dialogArguments操作父窗口时,在IE下不需要指定document.domain而在FireFox下则正好相反需要指定才能生效;采用opener方式操作父窗口时都不需要...

    js -- 跨域问题.doc

    可以设置相同的document.domain属性值来解决跨域。缺点是该方法只限于主域相同,子域不同的跨域场景。 (3)postMessage API解决跨域 postMessage API通常用于获取嵌入页面中的第三方数据。一个页面发送消息,另一...

    「JavaScript」JS四种跨域方式详解

    本文将详细介绍四种主要的JavaScript跨域方式:JSONP、修改`document.domain`、使用`window.name`以及HTML5的`window.postMessage`。 ### 1. JSONP(JSON with Padding) JSONP是一种解决跨域问题的早期方法,它利用...

    JavaScript跨域总结与解决办法

    ### JavaScript跨域总结与解决办法 #### 跨域的基本概念 跨域问题源自于浏览器的安全策略之一——**同源策略**。同源策略是浏览器为了防止恶意网站通过脚本访问其他网站的数据而采取的一种安全措施。它规定了一个...

    详解js跨域请求的两种方式,支持post请求

    JSONP实现跨域 常用的jquery实现跨域调用 $.ajax({ url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php", dataType: "jsonp", jsonp: "callback", context: document.body, success: ...

    javascript跨域访问的方法.pdf

    JavaScript跨域访问是Web开发中的常见挑战,由于浏览器的安全策略——同源策略,JavaScript通常只能访问与当前页面同源(协议、域名、端口都相同)的资源。然而,为了实现不同源之间的通信,开发者可以采取多种方法...

    JS跨域访问解决方案的总结.doc

    JavaScript跨域访问解决方案 在Web开发中,由于同源策略的限制,JavaScript通常只能与同一协议、域名和端口的服务器进行通信。然而,随着Web应用程序的复杂性和交互性增加,跨域请求变得越来越普遍,比如加载外部...

Global site tag (gtag.js) - Google Analytics