我发现我有很大的强迫症，如果看到别人的文章没有最终的效果图，我会毫不犹豫关掉这个页面。真的很炸毛这种，让我有很不舒服的体验；所以纵使网上有类似的了，我还是写一篇给那些跟我有同样症状的人阅读。

首先来学习一下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的更多相关文章

  1. 如何做到在虚拟数据库和真实数据库之间自由切换？【低调赠送：QQ高仿版GG 4.4 最新源码】

    记得以前在公司上班时,有时候白天的活没干完,我就会把工作带回家晚上加班继续做.但是,我们开发用的数据库是部署在公司局网内部的一台服务器上的,在家里是肯定连不上这台机器的.在家里没有数据库,服务端就跑不 ...

  2. lvs主备可以自由切换，vip落在主上的时候，端口无法telnet，业务连接不了

    lvs主备可以自由切换,vip落在主上的时候,端口无法telnet,业务连接不了 解决:将主上的keepalived重启,故障解除 原因:不可知 lvs常见故障原因: real server上的脚步没 ...

  3. 利用JavaScript来切换样式表

    切换样式表 html页 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  4. 通过切换iframe来定位元素（用于Python+selenium自动化测试）

    切换 iframe:1.由于登录按钮是在iframe上,所以第一步需要把定位器切换到iframe上2.用switch_to_frame方法切换,此处有id属性,可以直接用id定位切换 iframe 与 ...

  5. 写个关于使用cocostudio Armature实现动画自由切换的小demo

    这是一个关于使用cocostudio实现动画自由切换的小demo auto sprite =Sprite::create("background.png"); sprite-> ...

  6. selenium自动化之切换iframe

    许多人在执行脚本的时候会发现,明明自己的元素路径没写错啊!怎么还是报元素未找到的异常呢?是的,没错,你可能是遇上iframe啦!下面将介绍关于iframe的相关操作. 例子:以163邮箱登录页面为例 ...

  7. JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招

    一般商业网站都有一个语言的需求,就是为了照顾使用正体中文的国人,会特地提供一个切换到正体中文的选项(或曰“繁体中文”).传统做法是在服务端完成的,即通过某些控件或者过滤器转换文本语言.这里笔者介绍一种 ...

  8. python2与3自由切换

    Ubuntu-.04Python2与Python3自由切换 阅读目录(Content) 一.配置ssh链接 二.安装Python3及pip3 三.将Python3设置为默认 python2切换pyth ...

  9. win10系统下自由切换桌面

    说明: win10系统下自由切换桌面,确认在win10系统下操作进行. 方法: 1.快捷键:ctrl+win键(开始键)+方向键(左/右) 2.桌面最下面的状态栏,点击红框

随机推荐

  1. 20135202闫佳歆--week4 课本第5章学习笔记

    第五章 系统调用 一.与内核通信 系统调用在用户控件进程和硬件设备之间添加了一个中间层,作用如下" 为用户空间提供了一种硬件的抽象接口 系统调用保证了系统的稳定和安全 每个进程都运行在虚拟系 ...

  2. PAT 甲级 1096 Consecutive Factors

    https://pintia.cn/problem-sets/994805342720868352/problems/994805370650738688 Among all the factors ...

  3. Jmeter使用笔记之函数

    用Jmeter才做了一个项目的测试,就不得不对函数这部分吐槽一下,真是有点弱,难怪大多数人不用这个功能,不过如果用的好也是很方便的,以下慢慢说. 一.BeanShell函数 在测试中遇到了时间戳的加减 ...

  4. 2017全球GDP总量达74万亿美元 各国占比排行榜

    全球GDP总量达74万亿美元 各国占比排行榜     2017年公布的2015年全球各国GDP占比,数据图片来源:世界银行报告 2月24日,来自世界银行的最新GDP数字已于2月早些时候公布,现由How ...

  5. Java超类-java.lang.object

    Java是面向对象的,Object是所有对象的超类(不是继承,也不是实现接口) Object类是所有Java类的祖先.每个类都使用 Object 作为超类.所有对象(包括数组)都实现这个类的方法. 如 ...

  6. 【bzoj5004】开锁魔法II 组合数学+概率dp

    题目描述 有 $n$ 个箱子,每个箱子里有且仅有一把钥匙,每个箱子有且仅有一把钥匙可以将其打开.现在随机打开 $m$ 个箱子,求能够将所有箱子打开的概率. 题解 组合数学+概率dp 题目约定了每个点的 ...

  7. Ubuntu 16.04搭建LAMP开发环境

    基本设置 1.配置网络环境 管理员给分配了一个静态IP,所以还需要进一步配置网络环境 配置DNS:右上角网络连接->编辑链接->有线连接1->IPv4设置->DNS服务器:20 ...

  8. CentOS安装git及使用Gitolite来管理版本库

    首先吐槽一下网上的各种教程,大部分都扯蛋,估计都是些所谓的"编辑"在网上瞎抄来的-- 以下内容都是基于CentOS的服务器端,Mac OS X的客户端. 如果是使用的Windows ...

  9. 为harbor部署swagger-ui

    有了swagger,所有REST API就一览无余了. Harbor官方已经准备好了部署脚本,部署起来其实特别简单,这里仅作记录. 1.下载部署脚本和swagger文件到本地harbor目录. # c ...

  10. 【POJ1958】汉诺塔+

    题目大意:给定一个四个柱子的汉诺塔,N 个盘子,求最少多少步移动到另一个柱子上. 题解:\(f[n]=min(2*f[i]+d[n-i])\),其中 \(d[i]\) 为汉诺三塔最小移动次数.M 塔同 ...