通过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.桌面最下面的状态栏,点击红框
随机推荐
- 20135316Linux内核学习笔记第五周
20135316王剑桥<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.给MenuOS增加time和t ...
- 为什么HashMap不是线程安全的
电面突然被问到这个问题,之前看到过,但是印象不深,导致自己没有答出来,现在总结一下. HashMap的内部存储结构 transient Node<K,V>[] table; static ...
- 初学Hadoop之单机模式环境搭建
本文仅作为学习笔记,供大家初学Hadoop时学习参考.初学Hadoop,欢迎有经验的朋友进行指导与交流! 1.安装CentOS7 准备 CentOS系统镜像CentOS-7.0-1406-x86_64 ...
- Git从零开始（一）
一.首先windows安装git客户端 官网下载地址:https://git-for-windows.github.io/,这里下载会很慢,我试了好几次都失败了. 百度网盘资源: https://pa ...
- 安装spring-tool-suite插件
spring-tool-suite是一个非常好用的spring插件,由于eclipse是一个很简洁的IDE,因此许多插件,需要我们自己去手动下载.而Spring-tool-suite插件即是其中之一. ...
- 二分图最大权匹配模板（pascal）
用uoj80的题面了: 从前一个和谐的班级,有 nlnl 个是男生,有 nrnr 个是女生.编号分别为 1,…,nl1,…,nl 和 1,…,nr1,…,nr. 有若干个这样的条件:第 vv 个男生和 ...
- 51nod 1494 选举拉票 (线段树+扫描线）
1494 选举拉票 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 80 难度:5级算法题 收藏 关注 现在你要竞选一个县的县长.你去对每一个选民进 ...
- 2017-2018 ACM-ICPC, Asia Daejeon Regional Contest C（记忆化搜索）
C题 Problem C Game Map 思路: 之前暴力搜索写了好几发,一直超时,后面看其他人的题解发现要用记忆化搜索..直接暴力搜的话有太多重 复的计算. dist u 表示以u 为起点所能走的 ...
- MT【88】抽象函数
分析:此类题一般有两种做法,第一种按解答题做法, 第二种作为填空题找对应的特殊函数,比如这里可以根据三角里和差化积得出$f(x)=\frac{1}{2}cos(\frac{\pi}{3}x)$
- 【bzoj1069】最大土地面积
Description 在某块平面土地上有N个点,你可以选择其中的任意四个点,将这片土地围起来,当然,你希望这四个点围成的多边形面积最大. Input 第1行一个正整数N,接下来N行,每行2个数x,y ...