iframe跨域
ajax异步传输不能跨域获取数据！
这个时候怎么办呢？
可以通过iframe来拼接多个域中的页面，而各个域中的页面可以异步操作自己的数据内容，这样就实现了跨域操作的效果！
下面是我做的案例：
iframe主页面代码，
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>企业级安全包</title>
<link rel="stylesheet" type="text/css" href="/css/default/softdown.css" />
</head>
<body>
<div class="wrap">
<div class="title"><span>企业级安装包</span></div>
</div>
<iframe src="http://test.ureading.com/ipa/ipa.html" frameborder=0 scrolling=no width="99%" height="480"></iframe> <iframe src="http://out.ureading.com/ipa/ipa.html" frameborder=0 scrolling=no width="99%" height="480"></iframe>
</body>
</html>
这段代码，将两个域中的ipa.html文件整合到了一起，
各个ipa.html文件可以操作自己域中的内容。异步操作自己的数据。
下面来看看ipa.html中的内容！
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>企业级安全包</title> <link rel="stylesheet" type="text/css" href="/css/default/softdown.css" /> <script src="/js/class/jquery-1.3.2.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ //进入页面就进行的处理 $.ajax({ type: "POST", url:"/default/index/ajaxcheckedlessons", data:"", success:function(response){ if(response){ var data = eval('('+response+')'); //alert(data); if(data['8yuwen']){ $("#8yuwen").attr("style","color:red;"); }else{ $("#8yuwen").attr("style",""); } if(data['8wuli']){ $("#8wuli").attr("style","color:red;"); }else{ $("#8wuli").attr("style",""); } if(data['9yuwen']){ $("#9yuwen").attr("style","color:red;"); }else{ $("#9yuwen").attr("style",""); } if(data['9wuli']){ $("#9wuli").attr("style","color:red;"); }else{ $("#9wuli").attr("style",""); } }else{ alert("error"); } } }); //ajax实现异步提醒 $(".sellessons").click(function(){ var todo = $(this).attr("todo"); var class_id = $(this).attr("class_id"); ajaxsellessons(todo,class_id); $(this).find('p').css('color', 'red'); $(this).parent().siblings().find('p').css('color','black'); //实现相反操作 if(todo=='selyuwen'){ todo='selwuli'; }else{ todo='selyuwen'; } if(class_id==2){ class_id=3; }else{ class_id=2; } ajaxsellessons(todo,class_id); var $obj = $(".sellessons[class_id="+class_id+"][todo="+todo+"]"); $obj.find('p').css('color', 'red'); $obj.parent().siblings().find('p').css('color','black'); }); function ajaxsellessons(todo,class_id){ $.ajax({ type: "POST", url:"/default/index/"+todo, data:"class_id="+class_id, success:function(response){ if(response){ //alert(response); }else{ alert("error"); } } }); } }); </script> </head> <body> <div class="wrap"> <div class="tab_box"> <div class="tab_title">三楼对 <img src="/images/teacher/n_icon.png"> 演示版本</div> <table border="0" cellpadding="0" cellspacing="0" class="tab" width="100%"> <tr> <td width="25%" align="center"><p><a href="http://test.ureading.com/r.php?name=student"><img src="/images/teacher/st_icon.png" width="61" height="72"><br/>学生</a></p></td> <td width="25%" align="center"><p><a href="http://test.ureading.com/r.php?name=teacher"><img src="/images/teacher/tc_icon.png" width="62" height="72"><br/>老师</a></p></td> <td width="50%" align="center"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="10%" align="center">8班：</a> <td width="45%" align="left"><a todo="selyuwen" class_id="2" class="sellessons" style="cursor:pointer"><img src="/images/teacher/wl_icon.png" width="67" height="70"><p style="color:red;" id='8yuwen'>上语文</p></a></td> <td width="45%" align="left"><a todo="selwuli" class_id="2"class="sellessons" style="cursor:pointer"><img src="/images/teacher/wl_icon.png" width="67" height="70"><p style="color:red;" id='8wuli'>上物理</p></a></td> </tr> <tr> <td width="10%" align="center">9班：</a> <td width="45%" align="left"><a todo="selyuwen" class_id="3" class="sellessons" style="cursor:pointer"><img src="/images/teacher/wl_icon.png" width="67" height="70"><p style="color:red;" id='9yuwen'>上语文</p></a></td> <td width="45%" align="left"><a todo="selwuli" class_id="3" class="sellessons" style="cursor:pointer"><img src="/images/teacher/wl_icon.png" width="67" height="70"><p style="color:red;" id='9wuli'>上物理</p></a></td> </tr> </table> </td> </tr> <tr> <td colspan="3" align="left"> <a href="/default/clear/clearexams/op/todb" target="_blank"><img src="/images/teacher/pack.png" width="100" height="32" style="padding-top:0px;"></a> </td> </tr> </table> </div> </body> </html>
这个页面通过ajax异步获取自己的一些数据。
这样两个域中的数据就可以通过一个页面来操作了。
这就是iframe的作用！
可以跨域操作！