博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
通过JavaScript自由切换iframe
阅读量:5329 次
发布时间:2019-06-14

本文共 656 字,大约阅读时间需要 2 分钟。

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

首先来学习一下what is iframe:

其实说白了就是在一个网页里再加载一个网页罢了。你可以这样44:

代码如下:

单纯这样子用是比较少的,常用的是在切换iframe等操作。我们来扩展一下它的属性:

切换iframe可以通过ajax、vue、JavaScript;当然了,看自己喜好了,我这里就用JavaScript就ok了。、

先来说一下我的方法吧,我是通过JavaScript定义一个函数,将获取来的参数重新复制给SRC属性,如此就可以做到自由切换iframe了。

 

函数是这样子的:

这里的showfame是iframe的框架名,然后你现在点击xxxx_1以后右侧的DIV需要显示一个HTML文件或者别的文件。如下所示:

那么你可以这样子

在xxxx_1这个a标签这里使用刚才定义的函数:

然后还需要在你那个div所在的位置这样写:

iframe里的name值要和之前a标签里的target属性对应,这样a标签才能跳转到你指定的div。

然后你就会发现差不多over了。

再结合刚才的那个属性表,调一下iframe的一些属性就基本没啥问题了。

你可以再尝试着制作xxx_2这个超链接。

转载于:https://www.cnblogs.com/nul1/p/10743690.html

你可能感兴趣的文章
NPOI导出EXCEL报_服务器无法在发送 HTTP 标头之后追加标头
查看>>
GDB使用小记
查看>>
Hive环境搭建及测试
查看>>
时间管理(二):时间管理的六项基本原则
查看>>
iOS8 自定义navigationbar 以及 UIBarButtonItem 边距问题
查看>>
iOS多线程编程--NSOperation(转)
查看>>
高可用Redis(四):列表,集合与有序集合
查看>>
进程线程之pid,tid
查看>>
立即执行函数
查看>>
rsync使用详解
查看>>
SVN常用命令
查看>>
bzoj3223Tyvj 1729 文艺平衡树 splay
查看>>
七夕心形demo
查看>>
Python垃圾回收机制:gc模块
查看>>
使用ifconfig命令来看网卡的IP,但是,输入命令之后,eht0里面只有 inet6 addr 而没有 inet addr...
查看>>
VsCode云端版本
查看>>
MyBatis学习--查询缓存
查看>>
Java实现快速排序
查看>>
python学习笔记--python数据类型
查看>>
Java学习总结
查看>>