div中插入iframe框架，使连接跳转直接显示在iframe框架中

最新推荐文章于 2021-10-08 17:30:36 发布
最新推荐文章于 2021-10-08 17:30:36 发布
阅读量2k 收藏 7
点赞数
分类专栏： div中iframe框架 文章标签： div iframe 同一页面跳转
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/majic_Jing/article/details/101083017
版权
该博客介绍如何在div元素中插入iframe框架，以便链接点击后内容在iframe内展示，达到类似菜鸟教程页面的效果。通过创建两个div，然后在第二个div中添加iframe，并配合a标签，实现在同一页面内进行内容跳转。
摘要由CSDN通过智能技术生成

div中插入iframe框架，使连接跳转直接显示在iframe框架中

想要的效果类似与菜鸟教程的页面：

https://www.runoob.com/html/html-attributes.html

现在开始上干货，首先创建两个div块，代码如图：在这里插入图片描述

然后在第二个div块里加入一个框架：

在这里插入图片描述

然后加入a标签就行了：

最低0.47元/天 解锁文章
majic_Jing
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用Div实现IFrame效果
牵挂著你是那颗我的心 飘呀飘地在你面前捉摸不定 牵挂著你是那份我的情 吹呀吹到你的眼前我的心 我不愿看到你那湿润的眼睛 怕我会忍不住疼你怕你伤心 我不愿听见你说寂寞的声音 怕我会忍不自你说我的真感情
06-14 3582
使用Div实现IFrame效果 div.contenthead {    width: 300;    height: 100%;    overflow-x: hidden;    overflow-y: hidden;  }      div.contentdetail {    width: 300;    height: 100px;    overflow-x: auto;   
div中嵌套iframe
编程日常记录与总结 https://franciswmf.iteye.com
04-12 5580
/js/My97DatePicker/calendar.jsp" frameborder="1"  scrolling="no">
div加jquery实现iframe标签的功能
weixin_34050389的博客
05-10 212
　　由于最近项目需要，前端后台都完全采用div+css的方式布局。因而左思右想，有什么办法可以替代常用的iframe上下左右的布局方式，而且页面只是局部刷新。参考了许多前辈的资料，并加以整理，因而有了以下的方法。 　　需求： 　　　　1、由于是全局的div+css，由于每次提交的内容都会有所差异。 　　　　2、每个提交都会用到，因而需要一个通用方法。 　　　　3、返回的是html内容，因而...
div实现iframe功能
xgocn的专栏
02-09 5328
div实现iframe功能：用Ajax技术(1)左边菜单a，href="javascript:method01()"(2)右边div，id="show"(3)js代码：egfunction method01(){ //加载请求页面 $.post("请求的地址",{传递参数的名称:"传递参数的值"}, function(data) {    $("#show").html(data); })}*有几...
HTML怎么使超链接在同一窗口的另一个框架中打开（iframe框架）
热门推荐
qq_42408149的博客
09-03 2万+
//框架 <iframe name="框架名" src="images/img1.png" width="1300" height=&
div嵌套html不用iframe
09-28
在网页设计和开发中，有时候我们需要在不使用`iframe`元素的情况下将一个页面的内容嵌入到另一个页面中。`iframe`虽然提供了这种功能，但有时可能会带来一些问题，如加载速度慢、SEO优化困难等。在这种情况下，我们...
在iframe 中页面中设置遮罩遮罩层
08-03
总结一下，创建一个在iframe中使用的页面遮罩层，需要以下步骤： 1. 添加一个`iframe`元素，设置其`src`属性指向要嵌入的页面。 2. 创建一个CSS类来定义遮罩层的样式。 3. 编写JavaScript函数以控制遮罩层的显示与...
JavaScript中iframe实现局部刷新的几种方法汇总
11-26
Iframe的用法与普通的标签元素DIV类似，可以指定在页面中嵌入的位置、颜色、界面布局等 一、iframe实现局部刷新方法一 [removed] $(function(){ $("#a1").click(function(){ var name= $(this).attr("name"); ...
vcsode利用iframe框架实现左边导航栏，右边显示导航栏跳转的页面内容的代码
最新发布
06-10
以下是一个简单的示例代码，使用iframe框架实现左侧导航栏，右侧显示导航栏跳转的页面内容： ```html <!DOCTYPE html> 示例代码 #sidebar { width: 200px; height: 100%; position: fixed; top:...
跳转页面出现在框架中的处理办法
moumouyrf的博客
09-16 322
window.onload=function(){ if(window.parent != window){ window.parent.location.href = "${pageContext.request.contextPath}/jsp页面"; } };
HTML在div外加iframe,如何在iframe中追加div元素
weixin_35196909的博客
06-28 2162
我有一个网站，我在其上为某种目的叠加了一个div元素。现在，而不是覆盖，我想推动网页，并在iframe中的所有div。如何在iframe中追加div元素我已经创建了iframe，但无法在iframe中追加div。编辑：var iframepush = document.createElement('iframe');iframepush.frameBorder=0;iframepush.scrol...
在顶层iframe页面添加图片div
fireinjava的专栏
06-27 1784
又解决了一个问题...之前想太复杂了...   父页面http://localhost:8080/parent/index.jsp 子页面http://localhost:8081/child1/day.jsp 子页面通过iframe嵌入到父页面，然后子页面里面要在父页面上生成一个div，div.innerHTML = '&lt;img src="&lt;%=request.getCont...
HTML在div外加iframe,js中如何往iframe中添加一个div
weixin_39603469的博客
06-28 501
HTML codewindow.onload = function () {document.getElementById("showValue").contentWindow.document.designMode = "on";document.getElementById("showValue").contentWindow.document.contentEditable = true;v...
利用iframe将网页嵌套在h的div里面
sakura的博客
10-08 371
利用iframe将网页嵌套在h的div里面 整体实现的功能就如同标题所述。 直接看代码 解释一下，我这边实现的功能就是把某个网页在嵌入在本地的div中，然后直接调用打印预览。 <body> <div style="width: 100%;height:1000px;" id="goToPrint"></div> <script> let reportFlag = window.opener['reportFlag']
div+iframe实现弹窗
ALL TECHNOLOGIES ARE CLOUDS
03-15 791
from: http://blog.sina.com.cn/s/blog_8a18c33d0100v5hb.html   除了使用实际的弹出窗口，还可以使用控制一个div的display属性来模拟一个弹出窗口的操作，这里使用在Div里放一个iFrame的方式，主要考虑到可以在需要的时候加载弹出窗口的内容，减少主窗口的数据量。通是还要考虑的一个问题就是用户在完成一次选择后，当重复打开选择框时，...
div iframe html5,深入理解iframe
weixin_42433529的博客
06-10 788
深入理解iframe一、什么是 iframeiframe 用于在页面内显示页面，使用 会创建包含另外一个文档的内联框架(即行内框架)二、iframe 的常用属性1、width定义 iframe 的宽度2、height定义 iframe 的高度3、name规定 iframe 的名称4、frameborder规定是否显示边框，值为 0(不显示)和 1(显示)5、scrolling规定是否在 ifra...
使用iframe来让页面嵌入到div中
Handsome2013的博客
09-24 2478
使用iframe来让页面嵌入到div中 <!DOCTYPE html> <html> <head> <style> .content{ width: 100%; height: 100%; } p{ text-align: center;//里面行内元素居中 border: aqua 10px solid; } div{ margin:auto;//里面块状元素居中 border: s
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值