替换iframe的内容

简介: 一般就是点个按钮然后在不跳转页面的情况下显示另外一个页面的内容,显示的速度比较快,ifream还算是常用的吧 用的时候实现方式有以下几种, 1.替换src路径(觉得麻烦,没接触过,就不这样干了) 2.

一般就是点个按钮然后在不跳转页面的情况下显示另外一个页面的内容,显示的速度比较快,ifream还算是常用的吧

用的时候实现方式有以下几种,

1.替换src路径(觉得麻烦,没接触过,就不这样干了)

2.移除原来的ifream元素,新追加一个ifream元素

 

 $(function() {
            $("#bt").click(function () {
                $("#f").remove();//移除默认的框架集
                var i = "<iframe id='f' class='embed-responsive-item'     src='HtmlPage2.html'></iframe>";
                $("#d").append(i);//点击按钮并移除原来的集合后追加新的框架集
            });
        });

这样就做到了类似于页面跳转的功能了!

目录
相关文章
|
6月前
|
JavaScript
jQuery方式追加div覆盖
jQuery方式追加div覆盖
|
9月前
|
安全 UED
HTML <iframe> 标签的常用属性--详解(附加代码)
HTML <iframe> 标签的常用属性--详解(附加代码)
103 0
|
10月前
|
移动开发 人工智能 前端开发
HTML5 常用 标签 锚 列表 用法
HTML5 常用 标签 锚 列表 用法
|
JavaScript 前端开发
JavaScript通过改变location对象的hash属性实现相同页面显示不同详情内容的效果
JavaScript通过改变location对象的hash属性的应用 前面我们学到了BOM的Location对象,现在来讲一下实际的应用。通过改变hash属性获取不同的数据。 1.列表页面代码: &lt;a href=&quot;10模拟详情页面.html#0&quot; target=&quot;_blank&quot;&gt;张三&lt;/a&gt; &lt;a href=&quot;10模拟详情页面.html#1&quot; target=&quot;_blank&quot;&gt;李四&lt;/a&gt; &lt;a href=&quot;10模拟详情页面.html#2&quot; target=&quot;_blank&quot;&gt;王五&lt;/a&gt; &lt;a href=&quot;10模拟详情页面.html#3&quot; target=&quot;_b
|
移动开发 JavaScript 前端开发
HTML的笔记及展示(1)(锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API)
HTML的笔记及展示(1)(锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API)
110 0
HTML的笔记及展示(1)(锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API)
|
JavaScript
(富文本常用)js遇到需要正则匹配来修改img标签+清除行内样式
(富文本常用)js遇到需要正则匹配来修改img标签+清除行内样式
342 0
|
JavaScript
一段js实现复制文本内容到剪切板
一段js实现复制文本内容到剪切板 该方法兼容所有浏览器~
81 0
BOM+DOM案例——阻止链接跳转,div滚动条,元素的隐藏方式,字符串拼接
BOM+DOM案例——阻止链接跳转,div滚动条,元素的隐藏方式,字符串拼接
108 0
BOM+DOM案例——阻止链接跳转,div滚动条,元素的隐藏方式,字符串拼接
|
JavaScript
jq动态拼接html页面及数据
jq动态拼接html页面及数据
388 0
jq动态拼接html页面及数据
|
JavaScript UED 开发者
HTML文档内容与<script>元素内容的加载顺序
本文目录 1. 基本理论 2. 内部JS代码与外部JS代码 3. 多个`
367 0