ajax+div 代替iframe 学习尝试

时间：2023-11-22 18:01:02

工作的时候遇到了所谓html内多tab展示的情况，主要是通过iframe来关联子页面；

不过也不知道从何时开始记得是说iframe不建议多用，所以想想，还是找找有没有其他方法（不应用于工作）；

先说下关于用iframe的感觉吧，第一次尝试实际应用，iframe都有至少一个form在里面，而且主页面是为了做关于一个tab提交form之后提示并切换到下一个tab，主页面负责加载了tab的源地址即xxx.jsp ，那么当时的做法时，iframe提交后javascript调用父页面的js方法实现tab切换，好在工作上用的是ie（为什么我反倒觉得恶心），通过如下：

//iframe里js

function pageNext(param){

  window.parent.pageNext(param);

}
//父页面里的js

function pageNext(){

  alert("孩子，你居然召唤了父亲大人我的魔力了//魔王奶爸看多了");

  //自行实现

}

不过这样的父子页面调用，貌似在webkit下似乎报错了，难道因为这样所以才说尽量别用。

好了，说回正题，当时我就咨询了下其他人，有没有不用iframe的做法，刚好他们也在研究，查看了一下网上资料。

通过在主页面设置div，触发tab页面的内容放置于div中，实际代码如下：

<%@ 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.jsp

<script type="text/javascript">

    function test(){//后加载是无法调用到的

        alert("whatt?");

    }

</script>

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

相关文章