工作的时候遇到了所谓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();" />

ajax+div 代替iframe 学习尝试的更多相关文章

  1. ajax跨域请求学习笔记

    原文:ajax跨域请求学习笔记 前言 ajax,用苍白的话赞扬:很好. 我们可以使用ajax实现异步获取数据,减少服务器运算时间,大大地改善用户体验:我们可以使用ajax实现小系统组合大系统:我们还可 ...

  2. 将展示内容（div、iframe）放在Expand控件中

    Expand是ArcGIS JavaScript API 4.3推出的一个widget(控件),用于承载一个HTML DOM元素,可以把一个自己编写的div或者是一个其他的Esri widget控件放 ...

  3. 基于Ajax+div的“左边菜单、右边内容”页面效果实现

    效果演示: ①默认页面(index.jsp): ②:点击左侧 用户管理 标签下的 用户列表 选项后,右边默认页面内容更新为用户列表页(userList.jsp)的内容 : ③:同理,点击 产品管理.订 ...

  4. jQuery UI resizble、draggable的div包含iframe导致缩放和拖拽的不平滑解决方法

    前言 不仅仅是jQuery UI resizble的div包含iframe会导致缩放的不平滑,draggable也会出现包含iframe会导致拖放的不平滑,但是因为jQuery UI有为draggab ...

  5. DIV+CSS系统学习：转载

    第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...

  6. python_way day21 Django文件上传Form方式提交，原生Ajax提交字符处啊，Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式，Django验证码，抽屉示例，

    python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...

  7. 文件上传---form表单，ajax,jquery,以及iframe无刷新上传 （processData，contentType讲解）

    服务端程序: import tornado.web import os IMG_LIST=[] class IndexHandler(tornado.web.RequestHandler): def ...

  8. 两种文件上传的实现－Ajax和form+iframe

    前言 话说现在很多很多项目需要用到文件上传,自从有了HTML5之后,上传就变的超级简单了.HTML5支持多图片上传,而且支持ajax上传,而且支持上传之前图片的预览,而且支持图片拖拽上传,而且还是纯粹 ...

  9. div中iframe高度自适应问题

    网页分为上.中.下三部分,上.下高度固定中间高度自适应:中间分为左.右两部分,左边宽度固定,右边宽度自适应.现在右侧div是宽度和高度都是自适应,右侧div里有个IFrame,想让IFrame自适应外 ...

随机推荐

  1. kill命令

    *杀死进程最安全的方法是单纯使用kill命令,不加修饰符,不带标志.   首先使用ps -ef命令确定要杀死进程的PID,然后输入以下命令:   # kill -pid   注释:标准的kill命令通 ...

  2. Angular2 NgModule

    1. 说明 典型的模块是一个内聚的代码块,用来实现某种单一的功能.Angular2应用程序本质上是有一系列模块组成的,而且Angular 本身就是一组模块库.模块主要是导出一些东西——类,函数,值,供 ...

  3. markdown博文测试

    一级标题 二级标题 正文 三级标题 C代码: // code #include <stdio.h> int main() { printf("Hello, World!\n&qu ...

  4. JSP复习整理（五）JavaBean生命周期

    一.创建一个JavaBean UserBean.java package jsp.test; public class UserBean { private String userName; priv ...

  5. CC2540串口输出调试功能

    可以用printf()做串口打印输出 这个功能非常简单,首先在工程管理下的preprocessor把串口打开HAL_UART=TRUE. 然后看我的npi.c文件,多了什么自己琢磨,懒点的就直接复制吧 ...

  6. 【Juicer】 一个高效、轻量的前端 (Javascript) 模板引擎

    引用地址:http://juicer.name/docs/docs_zh_cn.html * 一个完整的例子 HTML 代码: <script id="tpl" type=& ...

  7. Web 前端之HTML和CSS

    Web 前端之HTML和CSS HTML被称为超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言,标记语言是一套标记标签,HTML使用标记标签 ...

  8. ajax+php+mysql 实现点赞、局部刷新，每个IP只能对一篇文章点赞一次

    主要流程: 点赞—>判断当前设备IP是否对当前文章有过点赞记录—>若有记录,弹出提示“已经赞过了”; 若无记录,当前文章点赞数+1,并在记录设备IP点赞记录的表中插入信息. 文章表 art ...

  9. ubuntu svn

    http://blog.csdn.net/neutrojan/article/details/37659747

  10. 【Java EE 学习 57】【酒店会员管理系统之分页模板书写】

    分页一直是一个比较麻烦的问题,特别是在我做的这个系统中更是有大量的分页,为了应对该问题,特地写了一个模板以方便代码重用,该模板包括后台分页的模板.前端显示的模板两部分. 一.分页分析 分页需要三种类型 ...