js的跨域

悠悠 2022-08-14 00:50 169阅读 0赞

理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。

js跨域可以通过hash，jsonp，flash，html5的 postMessage

<!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="jquery-1.8.3.min.js" ></script>
    
    </head>
    <body>
    <div ><button id="getJsonpByJquery"  >获取</button></div>
    </body>
    
    <script type="text/javascript" >
      function createJs(sUrl){
        var oS=document.createElement('script');
    	oS.type="text/javascript";
    	oS.src=sUrl;
    	document.getElementsByTagName('head')[0].appendChild(oS);
    	
      }
      
      createJs('jsonp.js');
    
    	function fn(json){
    	  //alert(json.name);
    	}
    	
    	
    	$("#getJsonpByJquery").click(function () {
    	
        $.ajax({
            url: 'http://suggestion.baidu.com/su?wd=&json=1&p=3&sid=9206_1455_7801_9753_9451_9475_9499_9769_9477_7798_9454_9978_9024&req=2&_=1416047072973',
            dataType: "jsonp",
            jsonp: "cb",
    		type:'get',
            success: function (data) {
                console.log(data)
            }
        })
    })
    </script>
    </html>

jsonp.js内容如下：

fn({name:'ikscher'});

[http://suggestion.baidu.com/su?wd=&json=1&p=3&sid=9206\_1455\_7801\_9753\_9451\_9475\_9499\_9769\_9477\_7798\_9454\_9978\_9024&req=2&cb=jQuery1102012195009808056056\_1416047072972&\_=1416047072973][http_suggestion.baidu.com_su_wd_json_1_p_3_sid_9206_1455_7801_9753_9451_9475_9499_9769_9477_7798_9454_9978_9024_req_2_cb_jQuery1102012195009808056056_1416047072972_1416047072973]

jQuery1102012195009808056056_1416047072972({"q":"","p":false,"bs":"","s":[]});

[http_suggestion.baidu.com_su_wd_json_1_p_3_sid_9206_1455_7801_9753_9451_9475_9499_9769_9477_7798_9454_9978_9024_req_2_cb_jQuery1102012195009808056056_1416047072972_1416047072973]: http://suggestion.baidu.com/su?wd=&json=1&p=3&sid=9206_1455_7801_9753_9451_9475_9499_9769_9477_7798_9454_9978_9024&req=2&cb=jQuery1102012195009808056056_1416047072972&_=1416047072973