• 使用document.domain和iframe实现站内AJAX跨域


    站内AJAX跨域可以通过document.domain和iframe实现,比如www.css88.com、js.css88.com、css88.com这3个域名其实是3个不同的域,很多时候www.css88.com和css88.com打开的可能是用一个页面,但是,他们确实是不同的域,比如www.css88.com的页面通过ajax无法直接获取css88.com域下的数据,这是由于js的安全性引起的。

    不过我们可以通过document.domain和iframe实现在站内的ajax跨域。

    查看demo:http://www.css88.com/demo/iframe-domain/

    还有一点要注意,这个方法需要在iframe加载后才能使用!

    <!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>使用document.domain和iframe实现站内AJAX跨域</title>
    <script type="text/javascript" src="http://www.css88.com/tool/css3Preview/jquery-1.4.2.min.js"></script>
    
    </script>
    </head>
    <body>
    	<div id="test"></div>
        <!--<iframe src="http://css88.com/demo/domain/iframe.html" id="iframe" style="display:none;"></iframe>-->
    <script type="text/javascript">
    //document.write(document.domain)
    document.domain = "css88.com";
    
    var createAjaxIframe={
    	appIframe: function(iframeId, iframeSrc){
    		var iframe = document.createElement("iframe");
    		iframe.src = iframeSrc// "http://css88.com/demo/domain/iframe.html";
    		iframe.id = iframeId;
    		iframe.style.display = "none";
    		if (iframe.attachEvent) {
    			iframe.attachEvent("onload", function(){
    				createAjaxIframe.domainAjax(iframeId);
    			});
    		}else {
    			iframe.onload = function(){
    				createAjaxIframe.domainAjax(iframeId);
    			};
    		}
    		document.body.appendChild(iframe);
    	},
    	domainAjax: function(iframeId){
    		var iframeDom = document.getElementById(iframeId).contentWindow.$;
    		iframeDom.getJSON("http://css88.com/demo/iframe-domain/city.html", function(date){
    			var cityOption = "";
    			for (i = 0; i < date.length; i++) {
    				cityOption += date[i].c_name + "--" + date[i].c_value + "<br />"
    			}
    			$("#test").html(cityOption);
    		});
    	}
    	
    };
    createAjaxIframe.appIframe("iframe","http://css88.com/demo/iframe-domain/iframe.html");
    </script>
    
    <!--统计-->
    <script type="text/javascript"> 
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script> 
    <script type="text/javascript"> 
    try {
    var pageTracker = _gat._getTracker("UA-3448069-1");
    pageTracker._trackPageview();
    } catch(err) {}</script> 
    </body>
    </html>
    

      

  • 相关阅读:
    (Vedctor经典)A
    C++ map用法
    (约瑟夫应用)5.4.1 Roman Roulette
    部分题集代码
    随机生成数
    如何在AutoCAD中实现鼠标双击事件
    浅谈JS之Error对象
    自定义微信小程序swiper轮播图面板指示点的样式
    物理像素与逻辑像素相关概念
    微信小程序中padding-right和margin-right无效
  • 原文地址:https://www.cnblogs.com/alone2015/p/5970077.html
Copyright © 2020-2023  润新知