首頁 > 其他

JS 跨域問題。。

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！ 
本來看著好玩的，在自己部落格上弄個一個tx微博，但是突然發現姓名和地址的寬度在google裡有點大，擠變形了，唉。。不想用css，css覆蓋啊啥的也不行啊，用js改變寬度。。結果悲劇的發現了這個js跨域問題
找資料。。未解決。。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> </title>

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
</head>

<body>            

<table id="Calendar1_entryCal"><tr><td>234234234</td></tr></table>
<iframe name="fname" id="fname" frameborder="0" scrolling="no" src="http://show.v.t.qq.com/index.php?c=show&a=index&n=m184394282&w=0&h=508&fl=1&l=30&o=1&co=4&cs=4252_202_9C85_BC6" width="100%" height="400"></iframe>
<div id="wb"></div>
</body>

</html>
<script type="text/javascript">
        window.onload =function () {
//            var test = $("#Calendar1_entryCal");
//            test.hide();
//            test.before().append
//        $("#userInfo + p").removeAttr("style");
//        $(window.frames["fname"].document).find(".userInfo:eq(0) > p").removeAttr("style");



            alert($(document.getElementById('fname').contentWindow.document.body).html());//無存取權限

            alert($(window.frames["fname"].document).html());
            alert($(window.frames["fname"].document).find($(".userInfo:eq(0) > p")));
            alert($(window.frames["fname"].document).find($(".userInfo:eq(0) > p")).attr("style"));
        }           
</script>

 

方案一、剪貼簿

原理：IE本身依附於windows平台的特性為我們提供了一種基於iframe，利用記憶體來“繞行”的方案，在這裡我稱之為，本機存放區原理。

缺點：不支援非IE瀏覽器，並且影響到使用者對剪貼簿的操作，使用者體驗非常不好，特別是在IE7下，受安全等級影響，會彈出提示框。

示範：[ 點此閱覽 ]

子頁面在子域：demo.ioldfish.cn下，在頁面中加入如下代碼擷取頁面高度並存入剪貼簿。

  1. <script type="text/javascript">
  2. var ua = navigator.userAgent;
  3. if ((i = ua.indexOf("MSIE")) >= 0)
  4. {
  5. var iObjH = window.document.documentElement.scrollHeight;
  6. window.clipboardData.setData('text',String(iObjH));
  7. }
  8. </script>

首頁面在主域：www.ioldfish.cn下，在頁面中加入如下代碼，擷取剪貼簿的值並賦值為子頁面所在的iframe的高度。

  1. <script type="text/javascript">
  2. window.onload = function()
  3. {
  4. var iObj =document.getElementById('iId');
  5. iObj.style.height=parseInt(window.clipboardData.getData('text'))+'px';
  6. }
  7. </script>

 

方案二、document.domain

原理：設定了document.domain，欺騙瀏覽器

缺點：無法實現不同主域之間的通訊。並且當在一個頁面中還包含有其它的iframe時，會產生安全性異常，拒絕訪問。

示範：[ 點此閱覽 ]

首頁面在主域：www.ioldfish.cn下，子頁面在子域：demo.ioldfish.cn下，在兩個頁面的頭部都加入如下代碼：

  1. <script type="text/javascript">
  2. document.domain="ioldfish.cn";
  3. </script>
方案三、通過JS擷取hash值實現通訊

原理：hash可以實現跨域傳值實現跨域通訊。

缺點：對於父視窗URL參數動態產生的，處理過程比較複雜一些。並且IE之外的瀏覽器遇到hash的改變會記錄曆史，影響瀏覽器的前進後退功能，體驗不佳。

示範：[ 點此閱覽 ]

子頁面在主域：www.lzdaily.com下，在頁面中添加如下代碼,因為hash是不受跨域限制的，所以可以將本頁面的高度順利的傳送給首頁面的hash。

  1. <script type="text/javascript">
  2. var hashH = document.documentElement.scrollHeight;
  3. var urlA = "http://www.ioldfish.cn/wp-content/demo/domain/hash/a2.html";
  4. parent.location.href= urlA+"#"+hashH;
  5. </script>

首頁面在主域：www.ioldfish.cn下，在頁面中添加如下代碼，首先取得子頁面傳遞過來的hash值，然後將hash值賦到子頁面所在的iframe的高度上。

  1. <script type="text/javascript">
  2. window.onload = function()
  3. {
  4. var iObj = document.getElementById('iId');
  5. if(location.hash)
  6. {
  7. iObj.style.height=location.hash.split("#")[1]+"px";
  8. }
  9. }
  10. </script>
方案四、傳hash值實現通訊改良版

原理：該方案通過“前端代理”的方式，實現hash的傳值，體驗上比之方案三有了很大的提升。

缺點：對於父視窗URL參數動態產生的，處理過程比較複雜一些。

示範：[ 點此閱覽 ]

子頁面在主域：www.lzdaily.com下，在頁面中添加如下代碼,首先在頁面裡添加一個和首頁面同域的iframe［也可動態產生］，他的作用就像是個跳板。C頁面中不需任何代碼，只要確保有個頁面就防止404錯誤就可以了！該方法通過修改iframe的name值同樣可以跨域傳值，只是比較”猥瑣“而已。

  1. <iframe id="iframeC" name="iframeC" src="http://www.ioldfish.cn/wp-content/demo/domain/hashbetter/c.html" frameborder="0" height="0"></iframe>

然後在頁面中加上如下代碼，利用頁面C的URL接收hash值，並負責把hash值傳給同域下的首頁面。

  1. <script type="text/javascript">
  2. hashH = document.documentElement.scrollHeight;
  3. urlC = "http://www.ioldfish.cn/wp-content/demo/domain/hashbetter/c.html";
  4. document.getElementById("iframeC").src=urlC+"#"+hashH;
  5. </script>

首頁面在主域：www.ioldfish.cn下，在頁面中添加如下代碼，擷取從C頁面中傳遞過來的hash值。這裡應用到一個技巧，就是直接從A頁面用frames["iId"].frames["iframeC"].location.hash,可以直接存取並擷取C頁面的hash值。這樣一來，通過代理頁面傳遞hash值，比起方案三，大大提高了使用者體驗。

  1. <script type="text/javascript">
  2. window.onload = function()
  3. {
  4. var iObj = document.getElementById('iId');
  5. iObjH = frames["iId"].frames["iframeC"].location.hash;
  6. iObj.style.height = iObjH.split("#")[1]+"px";
  7. }
  8. </script>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More