• JS 跨域问题。。


    本来看着好玩的,在自己博客上弄个一个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.hrefurlA+"#"+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>
  • 相关阅读:
    django URL路由基础
    Django2.0 URL配置
    【转】MSMQ 微软消息队列 简单 示例
    Equeue初识
    有关C#标签Attribute的熟悉
    【原创】C#模拟Post请求,正文为json数据的代码参考
    2016年5月11日摘自知乎的一些Redis大概了解
    【原创】网站抓包HttpWebRequest不返回Javascript生成的Cookie的解决办法
    【原创】Silverlight客户端发起WebRequest请求分析
    【原创】记一次HttpWebRequest中国移动查账单爬虫的攻克历程
  • 原文地址:https://www.cnblogs.com/smailxiaobai/p/2261763.html
Copyright © 2020-2023  润新知