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();" />