ajax+div 代替iframe 學習嘗試

時間 2019-11-10

標籤 ajax+div ajax div 代替 iframe 學習嘗試欄目 Ajax 简体版

原文原文鏈接

工做的時候遇到了所謂html內多tab展現的狀況，主要是經過iframe來關聯子頁面；javascript

不過也不知道從什麼時候開始記得是說iframe不建議多用，因此想一想，仍是找找有沒有其餘方法（不該用於工做）；html

先說下關於用iframe的感受吧，第一次嘗試實際應用，iframe都有至少一個form在裏面，並且主頁面是爲了作關於一個tab提交form以後提示並切換到下一個tab，主頁面負責加載了tab的源地址即xxx.jsp ，那麼當時的作法時，iframe提交後javascript調用父頁面的js方法實現tab切換，好在工做上用的是ie（爲何我反倒以爲噁心），經過以下：java

//iframe裏js
function pageNext(param){
  window.parent.pageNext(param);  
}

//父頁面裏的js
function pageNext(){
  alert("孩子，你竟然召喚了父親大人個人魔力了//魔王奶爸看多了");
  //自行實現    
}

不過這樣的父子頁面調用，貌似在webkit下彷佛報錯了，難道由於這樣因此才說盡可能別用。web

好了，說回正題，當時我就諮詢了下其餘人，有沒有不用iframe的作法，恰好他們也在研究，查看了一下網上資料。ajax

經過在主頁面設置div，觸發tab頁面的內容放置於div中，實際代碼以下：jsp

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home</title>
<script type="text/javascript" src="js/functionOfTab.js">
//既然ajax的方式加載的js沒法調用，那麼能夠經過使用主頁面嵌入js，這樣的話可能要考慮js與view的分離，其實也是不錯的
</script>
<script type="text/javascript">
 function loadDiv(){
//隱藏了加載的文件地址
  var xmlhttp;
  if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }else {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
      }
    };
  xmlhttp.open("GET","./ajax.do",true);
  xmlhttp.send();
 }
 function loadDiv1(){
//直接加載文件，但這樣就暴露了加載的url
  var xmlhttp;
  if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }else {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
      }
    };
  xmlhttp.open("GET","./tab.html",true);
  xmlhttp.send();
 }
</script>
</head>
<body>
<form name="testForm" action="./f.do">
 <input type="submit" value="跳轉"/>
</form>
<div><input type="button" value="load" onclick="loadDiv();" />
<input type="button" value="load file" onclick="loadDiv1();" /></div>
<div id="myDiv"></div>
</body>
</html>

tab.jspurl

<script type="text/javascript">
    function test(){//後加載是沒法調用到的
        alert("whatt?");
    }
</script>

<input type="button"  value="dede"  onclick="test();" />