• JavaScript跨域脚本调用(iframe方式)


    跨域请求,顾名思义,就是一个站点中的资源去访问另外一个不同域名站点上的资源。但在脚本中进行跨域请求是受安全性限制的。

    跨域脚本调用有很多种方法,这里介绍的利用hash来进行iframe结构的跨域访问。

    主要针对此种情况:

    站点A:www.aaa.com

    站点B:www.bbb.com

    其中A为父页面,B是子页面,以iframe形式嵌入到A中。

    要点:

    ① <script>中的src属性是可以跨域的。

    ② window.location.hash其实就是url中以#开始和分割的锚值参数,改变了hash的值,页面不会自动刷新,所以一个网页的状态得以保存。在父页面中(子页面传值给父页面同理)通过JS将需要传递的值作为字符串来改变子页面的hash值,子页面通过定时刷新来察觉自身hash值的变化,从而获取到父页面传递过来的值。

    缺点:

    ① 虽然改变了hash值不会导致页面自动刷新,但是url值已经改变,所以使用前进、后退等操作均会造成页面混乱。

    ② 只能传递字符串类型值。

    页面A: http://domain1/TestCross.html:

     1 <html>
    2 <head>
    3 <script language="javascript" type="text/javascript">
    4 var url = "http://domain2/TestCross.html";
    5 var oldHash = null;
    6 var timer = null;
    7 function getHash()
    8 {
    9   var hash = window.location.hash;
    10   if ((hash.length >= 1) && (hash.charAt(0) == '#'))
    11   {
    12     hash = hash.substring(1);
    13   }
    14   return hash;
    15 }

    16 function sendRequest()
    17 {
    18   var d = document;
    19   var t = d.getElementById('request');
    20   var f = d.getElementById('alienFrame');
    21   f.src = url + "#" + t.value + "<br/>" + new Date();
    22

    23 function setDivHtml(v)
    24 {
    25   var d = document;
    26   var dv = d.getElementById('response');
    27   dv.innerHTML = v;
    28

    29 function idle()
    30 {
    31   var newHash = getHash();
    32   if (newHash != oldHash)
    33   {
    34     setDivHtml(newHash);
    35     oldHash = newHash;
    36   }
    37   timer = window.setTimeout(idle, 100);
    38 }
     
    39 function window.onload()
    40 {
    41   timer = window.setTimeout(idle, 100);
    42 }
    43 </script>
    44 </head>
    45 <body>
    46 请求:<input type="text" id="request"> <input type="button" value="发送" onclick="sendRequest()" /><br/>
    47 回复:<div id="response"></div>
    48 <iframe id="alienFrame" src="http://domain2/TestCross.html"></iframe>
    49 </body>
    50 </html>

    页面B:http://domain2/TestCross.html:

     1 <html>
    2 <head>
    3 <script language="javascript" type="text/javascript">
    4 var url = "http://domain1/TestCross.html";
    5 var oldHash = null;
    6 var timer = null

    7 function getHash()
    8 {
    9   var hash = window.location.hash;
    10   if ((hash.length >= 1) && (hash.charAt(0) == '#'))
    11   {
    12     hash = hash.substring(1);
    13   }
    14   return hash;
    15 }

    16 function sendRequest()
    17 {
    18   var d = document;
    19   var t = d.getElementById('request');
    20   var f = parent;
    21   //alert(f.document); //试着去掉这个注释,你会得到“Access is denied”
    22   f.location.href = url + "#" + t.value + "<br/>" + new Date();
    23 }
     
    24 function setDivHtml(v)
    25 {
    26   var d = document;
    27   var dv = d.getElementById('response');
    28   dv.innerHTML = v;
    29 }
     
    30 function idle()
    31 {
    32   var newHash = getHash();
    33   if (newHash != oldHash)
    34   {
    35     setDivHtml(newHash);
    36     oldHash = newHash;
    37   }
    38   timer = window.setTimeout(idle, 100);
    39 }
     
    40 function window.onload()
    41 {
    42   timer = window.setTimeout(idle, 100);
    43 }
    44 </script>
    45 </head>
    46 <body>
    47 请求:<input type="text" id="request"> <input type="button" value="发送" onclick="sendRequest()" /><br/>
    48 回复:<div id="response"></div>
    49 </body>
    50 </html>


    两个网页基本相同,第一个网页内嵌一个iframe,在点击“发送”按钮后,会将文本框里的内容通过hash fragment传给IFRAME。点击IFRAME里的“发送”按钮后,它会将文本框里的内容通过hash fragment传给父窗口。因为是只改动了hash fragment,浏览器不会重新load网页内容,这里使用了一个计时器来检测URL变化,如果变化了,就更新其中一个div的内容 。

  • 相关阅读:
    C# .net页面乱码
    Spring Cloud 微服务三: API网关Spring cloud gateway
    Spring Cloud 微服务二:API网关spring cloud zuul
    Spring Cloud 微服务一:Consul注册中心
    Log4j2升级jar包冲突问题
    Log4j2配置
    opensearch空查询
    阿里云Opensearch数据类型
    Spring mybatis自动扫描dao
    【EDAS问题】轻量级EDAS部署hsf服务出现找不到类的解决方案
  • 原文地址:https://www.cnblogs.com/guohui/p/2366860.html
Copyright © 2020-2023  润新知