ajax+div 代替iframe 学习尝试
工作的时候遇到了所谓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 学习尝试的更多相关文章
- ajax跨域请求学习笔记
原文:ajax跨域请求学习笔记 前言 ajax,用苍白的话赞扬:很好. 我们可以使用ajax实现异步获取数据,减少服务器运算时间,大大地改善用户体验:我们可以使用ajax实现小系统组合大系统:我们还可 ...
- 将展示内容（div、iframe）放在Expand控件中
Expand是ArcGIS JavaScript API 4.3推出的一个widget(控件),用于承载一个HTML DOM元素,可以把一个自己编写的div或者是一个其他的Esri widget控件放 ...
- 基于Ajax+div的“左边菜单、右边内容”页面效果实现
效果演示: ①默认页面(index.jsp): ②:点击左侧 用户管理 标签下的 用户列表 选项后,右边默认页面内容更新为用户列表页(userList.jsp)的内容 : ③:同理,点击 产品管理.订 ...
- jQuery UI resizble、draggable的div包含iframe导致缩放和拖拽的不平滑解决方法
前言 不仅仅是jQuery UI resizble的div包含iframe会导致缩放的不平滑,draggable也会出现包含iframe会导致拖放的不平滑,但是因为jQuery UI有为draggab ...
- DIV+CSS系统学习：转载
第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...
- python_way day21 Django文件上传Form方式提交，原生Ajax提交字符处啊，Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式，Django验证码，抽屉示例，
python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...
- 文件上传---form表单，ajax,jquery,以及iframe无刷新上传 （processData，contentType讲解）
服务端程序: import tornado.web import os IMG_LIST=[] class IndexHandler(tornado.web.RequestHandler): def ...
- 两种文件上传的实现－Ajax和form+iframe
前言 话说现在很多很多项目需要用到文件上传,自从有了HTML5之后,上传就变的超级简单了.HTML5支持多图片上传,而且支持ajax上传,而且支持上传之前图片的预览,而且支持图片拖拽上传,而且还是纯粹 ...
- div中iframe高度自适应问题
网页分为上.中.下三部分,上.下高度固定中间高度自适应:中间分为左.右两部分,左边宽度固定,右边宽度自适应.现在右侧div是宽度和高度都是自适应,右侧div里有个IFrame,想让IFrame自适应外 ...
随机推荐
- kill命令
*杀死进程最安全的方法是单纯使用kill命令,不加修饰符,不带标志. 首先使用ps -ef命令确定要杀死进程的PID,然后输入以下命令: # kill -pid 注释:标准的kill命令通 ...
- appium for iOS config
appium-doctor: Running iOS Checks ✔ Xcode is installed at /Applications/Xcode.app/Contents/Developer ...
- PostgreSQL 允许远程访问设置方法
安装PostgreSQL数据库之后,默认是只接受本地访问连接.如果想在其他主机上访问PostgreSQL数据库服务器,就需要进行相应的配置. 配置远程连接PostgreSQL数据库的步骤很简单,只需 ...
- wget 扒站
在Linux下,通过一个命令就可以把整个站相关的文件全部下载下来. wget -r -p -k -np [网址] 参数说明: -r : 递归下载 -p : 下载所有用于显示 HTML 页面的图片之类的 ...
- centos下建立双机信任关系
在有些情况下,我们希望在两台centos机器之间建立ssh连接的时候,可以不用输入密码.最常见的情况就是在使用脚本做数据库备份的时候.这种情况下,我们可以通过公钥/私钥来建立双机之间的信任关系. 网上 ...
- Awesome
DotNet 资源大全中文版(Awesome最新版) http://www.cnblogs.com/best/p/5876596.html Java资源大全中文版(Awesome最新版) http:/ ...
- 模拟提交API数据Pyqt版
其实这个模拟提交数据之前已经写过篇: Python requests模拟登录 因为现在在做的项目中需要一个debug请求调试API,用PHP的CURL写了一个,又因Pyqt更能直观灵活的显示请求的参数 ...
- 在nginx中配置ip直接访问的默认站点
一台机子部署多个网站,我们直接访问ip (外网内网都一样)提示无法访问或404. 因为有多个网站,我们想指定某个网站为IP访问默认的网站,如何操作呢? 解:在Listen ip:port; 这个指令行 ...
- Linux学习内容
Linux学习要点(转载自红联) 一.学习Linux的基本要求1． 掌握至少50个以上的常用命令. 2． 熟悉Gnome/KDE等X-windows桌面环境操作 . 3． 掌握.tgz..rpm等软件 ...
- Mac下的类似apt-get的包管理工具Homebrew（笔记）
对于一个习惯了在 Ubuntu 的终端上通过 apt-get 来安装工具软件的我来说,也希望在Mac上找到类似的工具,能很方便的一条命令就能安装所需的软件,而不用手工的去查找下载编译,或者是折腾安装所 ...