iframe跨域

時間 2019-12-18

標籤 iframe 欄目 HTML 简体版

原文原文鏈接

ajax異步傳輸不能跨域獲取數據！javascript

這個時候怎麼辦呢？php

能夠經過iframe來拼接多個域中的頁面，而各個域中的頁面能夠異步操做本身的數據內容，這樣就實現了跨域操做的效果！css

下面是我作的案例：html

iframe主頁面代碼，java

<!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文件整合到了一塊兒，jquery

各個ipa.html文件能夠操做本身域中的內容。異步操做本身的數據。web

下面來看看ipa.html中的內容！ajax

<!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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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的做用！

能夠跨域操做！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。