2. 程式人生 > >JS跨域呼叫之document.domain--相同基礎域名頁面之間的呼叫

JS跨域呼叫之document.domain--相同基礎域名頁面之間的呼叫

阿新 • • 發佈：2019-02-09
最近專案需要跨域呼叫JS，整理一下相關知識，寫幾個帖子記錄一下學習歷程。 

例子只需要1個tomcat即可，這裡我的tomcat埠都改成80了。 

背景：瀏覽器在執行Javascript時，出於對安全性的考慮，禁止兩個或者多個不同域的頁面進行互相操作。 
相同域的頁面在相互操作的時候不會有任何問題。 

如下例子：檔案放置於%TOMCAT_HOME%/webapps/domain/目錄下 
1. parent.html

Html程式碼  收藏程式碼
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>parent</title>  
  6. <script>  
  7.     // document.domain = "wwwcomy.com";  
  8.     function parentFunction() {  
  9.         alert('function in parent');  
  10.     }  
  11.     function callChild() {  
  12.         child.window.childFunction();  
  13.         /*  
  14.             child 為iframe的name屬性值，  
  15.             不能為id，因為在FireFox下id不能獲取iframe物件  
  16.         */  
  17.     }  
  18. </script>  
  19. </head>  
  20. <body>  
  21. <input type="button" name="call child"  value="call child"
     onclick="callChild()"/>  
  22. <br/><br/>  
  23. <!--<iframe name="child" src="http://d1.wwwcomy.com/domain/child.html" >-->  
  24. <iframe name="child" src="child.html" >  
  25. </iframe>  
  26. </body>  
  27. </html>  


2.child.html

Html程式碼  收藏程式碼
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>child</title>  
  6. <script>  
  7.     // document.domain = "wwwcomy.com";  
  8.     function childFunction() {  
  9.         alert('function in child');  
  10.     }  
  11.     function callParent() {  
  12.         parent.parentFunction();  
  13.     }  
  14. </script>  
  15. </head>  
  16. <body>  
  17. <input type="button" name="call parent" value="call parent" onclick="callParent()"/>  
  18. </body>  
  19. </html>  


通過localhost/domain/parent.html訪問，則可以在子頁面和父頁面之間相互呼叫，點選按鈕即可看到效果。 

接下來我們模擬不用域名的呼叫,初步我們先處理相同基礎域名這個前提下，頁面之間的呼叫，即同頂級域名的不同二級域名之間的呼叫，如： 
d1.wwwcomy.com/domain/parent.html 
與 
d2.wwwcomy.com/domain/child.html 

首先需要修改本地域名對映檔案hosts,XP系統此檔案地址在C:\WINDOWS\system32\drivers\etc\hosts，win7與linux請google 

新增兩個域名對映： 
127.0.0.1 d1.wwwcomy.com 
127.0.0.1 d2.wwwcomy.com 

接下來將parent.html中iframe的src替換為註釋的那一段。 

此時我們在瀏覽器中輸入d2.wwwcomy.com/domain/parent.html即可訪問到對應頁面，這樣就可以模擬 d2.wwwcomy.com 與 d1.wwwcomy.com兩個二級域名頁面之間的呼叫了。 

如果沒有去掉document.domain 這行的註釋，瀏覽器會報錯,chrome中的報錯資訊為 
引用 Unsafe JavaScript attempt to access frame with URL http://d1.wwwcomy.com/domain/child.html from frame with URL http://d2.wwwcomy.com/domain/parent.html. Domains, protocols and ports must match. 

即不安全的JS呼叫。 

接下來取消註釋parent與child頁面中的 document.domain 這行程式碼，發現JS現在可以相互呼叫了。 
注意兩個檔案都需要這行程式碼，如果依舊報錯請檢視是不是由於瀏覽器的快取問題。

下面是對document.domain的使用說明和限制條件： 
域名必須屬於同一個基礎域名!而且所用的協議，埠都要一致，否則無法利用document.domain進行跨域

例子中的基礎域名就是"wwwcomy.com"，這個域名不能隨意指定的，也就是說，如果我們把剛才例子中的document.domain設定為"sina.com"是會報引數無效的錯誤的。 

通過這種方法，就可以實現同一個基礎域名下兩個二級域名頁面之間JS的跨域相互呼叫。後面的帖子會介紹其他跨域解決方案。

相關推薦

JS跨域呼叫之document.domain--相同基礎域名頁面之間的呼叫

最近專案需要跨域呼叫JS，整理一下相關知識，寫幾個帖子記錄一下學習歷程。 例子只需要1個tomcat即可，這裡我的tomcat埠都改成80了。 背景：瀏覽器在執行Javascript時，出於對安全性的考慮，禁止兩個或者多個不同域的頁面進行互相操作。 相同域的頁面在相互操作的

js跨域請求之jsonp原理和運用

1、js請求後端服務時，域名不同或域名相同埠不同都是跨域； 2、無論哪個瀏覽器js都不能跨域請求後端服務，解決辦法為jsonp；jsonp不是新技術，只是一個解決方案；即js不請求後端服務而是跨域請求js，即跨域載入js檔案，而這個js檔案由伺服器端返回。 3、js中可以在cookie中取出

JS跨域呼叫之JSONP--動態Script標籤方式實現跨域

動態Script標籤的方式往往是用來訪問不在同一個域的伺服器內部的資料的。例如, 當前我的域名：d1.wwwcomy.com我需要訪問的資料：百度翻譯"chair"的結果由於百度翻譯和我的域名不在一個域名下，所以這個資料通過常規方式是沒辦法獲取的，是被瀏覽器的安全機制所禁止

JS跨域：1.解決方案之-SpringMVC攔截器

package com.bdqn.utils; import java.util.List; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResp

js跨域互動(jQuery+php)之jsonp使用心得

jsonp是什麼？說到jsonp，你可能最先想到JSON；它還真和JSON有關係；JSONP(JSON with Padding)是JSON的一種“使用模式”，可用於解決主流瀏覽器的跨域資料訪問的問題。由於同源策略，一般來說位於 server1.example.com 的網頁

詳解js跨域

-name tor adding code 填充 父域 allow mes document 什麽是跨域？ 概念：只要協議、域名、端口有任何一個不同，都被當作是不同的域。 對於端口和協議的不同，只能通過後臺來解決。URL 說明

跨域訪問之CORS

基本 支持 oar 技術分享 過程 ets attribute 響應 api CORS:定義 2014年1月16日，W3C的Web應用工作組（Web Applications Working Group）和Web應用安全工作組（Web AppSec）聯合發布了跨源資

轉 Js 跨域CORS報錯 Response for preflight has invalid HTTP status code 405

control logs web col 奇怪 flight protected protoc tex 轉自：http://www.cnblogs.com/SilenceTom/p/6697484.html 調用接口遇到Response for preflight

jsonp: js跨域

而不是 分辨 ply eai dap ppr img lvs 字符 JSONP是JSON with padding(填充式JSON或參數式JSON)的簡寫，是應用JSON的一種新方法，常用於服務器與客戶端跨源通信，在後來的Web服務中非常流行。本文將詳細介紹JSONP 　J

【轉載】Ajax JS 跨域請求

-h 資源 pla dom light data 常用 clas json 原文： 簡單的ajax請求：http://blog.csdn.net/net_lover/article/details/5172509 復雜的ajax請求：http://blog.csdn.net

js跨域

處理 用戶 pan round 相同 enc echo cnblogs lB 轉自 https://www.cnblogs.com/yongshaoye/p/7423881.html 一、了解跨域？ 1 概念：只要協議、域名、端口有任何一個不同，都被當作是不同的域。 定義：

C# MVC js 跨域

iis服務器 .net headers 控制臺 bsp info tom protoc 服務器 js 跨域: 第一種解決方案(服務端解決跨域問題)： 跨域是瀏覽器的一種安全策略，是瀏覽器自身做的限制，不允許用戶訪問不同域名或端口或協議的網站數據。 只有域名（主域名【一

js跨域問題

字符串 r script err 周期 t對象 str 實現 col function js跨域：域名、端口、協議有一個不同便是跨域。 1.CORS CORS（Corss-Origin Resource Sharing,跨資源共享），基本思想是使用自定義的HTTP頭部讓

跨域問題之JSONP

<script> //假設伺服器地址是http://domain.com/getData 並且執行jsonp方式訪問 var script = document.createElement('script'); script.setAttribute('src',

vue.js 跨域的解決方法（轉載）

vue專案中，前端與後臺進行資料請求或者提交的時候，如果後臺沒有設定跨域，前端本地除錯程式碼的時候就會報“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 這種跨域錯誤。 要想本地正常的除錯，解決

vue-cli3.x vue.config.js 跨域配置

blog 調用 art code 頁面 port tail chang then devServer: { open: true, //瀏覽器自動打開頁面 host: "0.0.0.0", //如果是真機測試，就使用這個IP

上傳圖片截圖預覽控制元件不顯示cropper.js 跨域問題

上傳圖片到圖片伺服器，因為域名不同，多以會有跨域問題。 No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://img.xxx.com’ is there

js跨域訪問，No ‘Access-Control-Allow-Origin‘ header is present on

在本地用ajax跨域訪問請求時報錯：   XMLHttpRequest cannot loadhttp://www.zjblogs.com/. No 'Access-Control-Allow-Origin' header is present on the requested r

js跨域獲取資料

目錄   一、通過jsonp跨域 2、通過修改document.domain來跨子域 3、使用window.name來進行跨域 4、使用HTML5中新引進的window.postMessage方法來跨域傳送資料 一、通過jsonp跨域 在js中，我們直接用X

JS跨域ajax訪問

方式1:jsonp解決跨域訪問 需要服務和js配合 服務   [WebMethod] public void HelloWorld2(string name) { HttpContext.Current.Response.Content