通过JavaScript自由切换iframe
我发现我有很大的强迫症，如果看到别人的文章没有最终的效果图，我会毫不犹豫关掉这个页面。真的很炸毛这种，让我有很不舒服的体验；所以纵使网上有类似的了，我还是写一篇给那些跟我有同样症状的人阅读。
首先来学习一下what is iframe：
其实说白了就是在一个网页里再加载一个网页罢了。你可以这样44：
代码如下：
<html>
<iframe src='http://www.baidu.com'>
</html>
单纯这样子用是比较少的，常用的是在切换iframe等操作。我们来扩展一下它的属性：
切换iframe可以通过ajax、vue、JavaScript；当然了，看自己喜好了，我这里就用JavaScript就ok了。、
先来说一下我的方法吧，我是通过JavaScript定义一个函数，将获取来的参数重新复制给SRC属性，如此就可以做到自由切换iframe了。
函数是这样子的：
<script>
function changeit(url){
showframe.src=url;
}
</script>
这里的showfame是iframe的框架名，然后你现在点击xxxx_1以后右侧的DIV需要显示一个HTML文件或者别的文件。如下所示：
那么你可以这样子
在xxxx_1这个a标签这里使用刚才定义的函数：
然后还需要在你那个div所在的位置这样写：
iframe里的name值要和之前a标签里的target属性对应，这样a标签才能跳转到你指定的div。
然后你就会发现差不多over了。
再结合刚才的那个属性表，调一下iframe的一些属性就基本没啥问题了。
你可以再尝试着制作xxx_2这个超链接。
通过JavaScript自由切换iframe的更多相关文章
- 如何做到在虚拟数据库和真实数据库之间自由切换？【低调赠送：QQ高仿版GG 4.4 最新源码】
记得以前在公司上班时,有时候白天的活没干完,我就会把工作带回家晚上加班继续做.但是,我们开发用的数据库是部署在公司局网内部的一台服务器上的,在家里是肯定连不上这台机器的.在家里没有数据库,服务端就跑不 ...
- lvs主备可以自由切换，vip落在主上的时候，端口无法telnet，业务连接不了
lvs主备可以自由切换,vip落在主上的时候,端口无法telnet,业务连接不了 解决:将主上的keepalived重启,故障解除 原因:不可知 lvs常见故障原因: real server上的脚步没 ...
- 利用JavaScript来切换样式表
切换样式表 html页 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- 通过切换iframe来定位元素（用于Python+selenium自动化测试）
切换 iframe:1.由于登录按钮是在iframe上,所以第一步需要把定位器切换到iframe上2.用switch_to_frame方法切换,此处有id属性,可以直接用id定位切换 iframe 与 ...
- 写个关于使用cocostudio Armature实现动画自由切换的小demo
这是一个关于使用cocostudio实现动画自由切换的小demo auto sprite =Sprite::create("background.png"); sprite-> ...
- selenium自动化之切换iframe
许多人在执行脚本的时候会发现,明明自己的元素路径没写错啊!怎么还是报元素未找到的异常呢?是的,没错,你可能是遇上iframe啦!下面将介绍关于iframe的相关操作. 例子:以163邮箱登录页面为例 ...
- JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
一般商业网站都有一个语言的需求,就是为了照顾使用正体中文的国人,会特地提供一个切换到正体中文的选项(或曰“繁体中文”).传统做法是在服务端完成的,即通过某些控件或者过滤器转换文本语言.这里笔者介绍一种 ...
- python2与3自由切换
Ubuntu-.04Python2与Python3自由切换 阅读目录(Content) 一.配置ssh链接 二.安装Python3及pip3 三.将Python3设置为默认 python2切换pyth ...
- win10系统下自由切换桌面
说明: win10系统下自由切换桌面,确认在win10系统下操作进行. 方法: 1.快捷键:ctrl+win键(开始键)+方向键(左/右) 2.桌面最下面的状态栏,点击红框
随机推荐
- “数学口袋精灵”第二个Sprint计划(第五天)
“数学口袋精灵”第二个Sprint计划----第五天进度 任务分配: 冯美欣:欢迎界面的背景音乐完善 吴舒婷:游戏界面的动作条,选择答案后的音效 林欢雯:代码算法设计 进度: 冯美欣:欢迎界面背景 ...
- Redis的核心Hystrix在Spring mvc的使用
核心Hystrix,Hystrix对于接口调用具有很好的保护,能在多服务依赖的分布式系统中,有效的提供应用的可用性,并且对失败应用进行熔断和恢复检查,让应用在复杂的环境中也能各种稳. http://t ...
- 神奇的Redis延迟
最近在做某业务Redis的缩容工作,涉及到数据迁移,而Redis的数据迁移看起来蛮简单的,一对一的数据迁移只需要在slave行配置masterauth 和slaveof 两个参数即可,当然迁移过程中涉 ...
- P3254 圆桌问题
题目链接 非常简单的一道网络流题 我们发现每个单位的人要坐到不同餐桌上,那也就是说每张餐桌上不能有同一单位的人.这样的话,我们对于每个单位向每张餐桌连一条边权为1的边,表示同一餐桌不得有相同单位的人. ...
- C++实用整数快速输入输出模板（C++）
随便写一点放在这里,以后想蛇皮卡常就很方便啦 蒟蒻太懒了,也就暂时不搞什么封namespace之类的操作了 程序结束时记得flush一下. #include<cstdio> #define ...
- 架构师成长之路1.2-多功能系统信息统计工具dstat
点击返回架构师成长之路 架构师成长之路1.2-多功能系统信息统计工具dstat dstat命令是一个用来替换vmstat.iostat.netstat.nfsstat和ifstat这些命令的工具,是一 ...
- 【洛谷P1892】团伙
题目大意:维护 N 个人和 M 个关系,对每个人来说符合:我朋友的朋友也是我的朋友,我敌人的敌人也是我的朋友,求最多有多少个朋友构成的联通块. 题目大意:维护关系显然要用到并查集,这里是维护了两种关系 ...
- IIS并发连接数和数据库连接池
一.数据库连接池 1.报错: 超时时间已到.超时时间已到,但是尚未从池中获取连接.出现这种情况可能是因为所有池连接均在使用,并且达到了最大池大小. 2.问题分析: 问题的原因是与数据库的连接没有显示关 ...
- EasyUI 格式化列
以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色. 为了格式化一个数据网格(DataGrid)列,我们需要设置 ...
- Openstack运维指南文档整理
非常全面的运维指南整理http://zjzone.cc/index.php/2017/07/31/openstack-yun-wei-wen-dang-zheng-li/