iframeドメイン間
45547 ワード
ajax非同期転送ではドメイン間でデータを取得できません!
この時はどうしますか?
iframeで複数のドメインのページをつなぎ合わせることができ、各ドメインのページは自分のデータコンテンツを非同期で操作することができ、ドメイン間操作の効果を実現します.
次は私がやった例です.
iframeホームフェースコード、
このコードは、2つのドメインのipaをhtmlファイルが統合され、
各ipa.htmlファイルは、自分のドメイン内のコンテンツを操作できます.独自のデータを非同期で操作します.
次にipaを見てみましょう.htmlの内容!
このページはajaxによって非同期で自分のデータを取得します.
これにより、2つのドメインのデータは1つのページで操作できます.
これがiframeの役割です!
ドメイン間で操作できます!
この時はどうしますか?
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>このコードは、2つのドメインの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によって非同期で自分のデータを取得します.
これにより、2つのドメインのデータは1つのページで操作できます.
これがiframeの役割です!
ドメイン間で操作できます!