类似iFrame将多个页面合在一起的方法

最新推荐文章于 2024-05-22 10:52:10 发布
最新推荐文章于 2024-05-22 10:52:10 发布
阅读量5k 收藏 3
点赞数 1
分类专栏： 弄着玩 文章标签： 新手试手
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44356270/article/details/85693345
版权
在前端开发中，为了解决多个页面共用头部和尾部的问题，作者尝试了使用iFrame和jQuery Load方法。iFrame在解决动态效果和CSS样式冲突的同时，带来了页面混乱和嵌套问题。通过设置iFrame中a标签的target属性为"_parent"，成功解决了点击链接导致的页面混乱问题。
摘要由CSDN通过智能技术生成

iFrame和Load将多个页面合在一起的方法

最近做毕业设计做前端时想到多个页面都会使用到相同的头部和尾部，所以一开始是想着用Frame把页面加载进去。

<body>
		<iframe src="header.html"  width="100%" height="auto" marginwidth="0" marginheight="0" HSPACE="0" VSPACE="0" FRAMEBORDER="0"></iframe>
		<p class="test">空白测试 </p>
		<iframe src="footer.html"  width="100%" height="350px" marginwidth="0" marginheight="0" HSPACE="0" VSPACE="0" FRAMEBORDER="0" ></iframe>
</body>

但是使用后发现我的头部页面header的动态效果没了，往下滚动时设置的DIV固定顶部没有了效果，也显示不全页面，右侧导航栏也不显示出来，没有达到效果。

之后百度出了用JQurey加载的方法

<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script
最低0.47元/天 解锁文章
Wes_b
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用iframe实现将四个页面合成一个页面，并可以随意切换
Java兔的博客
03-21 1万+
任务 将“抄表册管理”、“抄表计划管理”、“执行抄表”、“抄表数据审核”、“抄表数据发布”四个页面整合成一个页面：“计划抄表”，以流程图节点的形式进行串联。 效果如下 红箭头所指的地方是一个流程图，每一个节点点击后会显示该节点所对应的页面，而每个页面的显示都要从控制层为切入点进入。 代码 &lt;%@page import="org.apache.commons....
用div实现的效果二——类似iframe
翔的杂谈
08-31 9114
iframe应用很普遍，通常的需求有两种：　　1. 获取iframe效果，就是带一个滚动条，可以省不少版面。　　2. 要嵌一个页面，实现框架链接。　　如果不方便使用iframe，可以有如下相应解决方案：　　1. 可以使用css布局来实现，即可以少一个页面，也可以提高执行效率。　　2. 可以采用xmlhttp远程获取数据。　　A. 直接模拟iframe　　用层做容器　
大型前端应用如何做系统融合？
最新发布
京东科技开发者
05-22 2505
在经历了为期两个月的紧张工作后，我们成功地将两个大型项目进行了深度整合，取得了显著的阶段性成果。通过这一融合过程，我们不仅统一了项目的代码规范和架构，还显著提升了组件的复用率。尽管在这个过程中我们遇到了诸多挑战和曲折，但最终的成果——用户体验的显著提升——使一切努力都显得弥足珍贵。我们深知，每一个成功的项目背后都有无数次的尝试和优化。在这个过程中，我们不断学习、适应和完善，最终实现了项目的无缝融合。
mvc除了iframe还可以怎么加载第三方页面的完整页面到自己的页面上_WEB 前端菜鸟，感觉很迷茫，该怎么做？...
weixin_39724009的博客
11-29 379
NO.10x00 先说结论我们可以把学习路线比作游戏中的段位上分，在不同的分段都有自己的定位和要锻炼的事情：青铜 - 从零开始小学生：怀着满腔的热血，看到了这一个行业的希望和未来，准备开始学习 Web 开发知识。先通过 w3cschool 等免费学习资源把 HTML、CSS 和 JavaScript 的基本操作学会了写一个简单的表白页面送给你的女/男朋友，展示一下自己努力的成果，如果没有就当我没说...
页面嵌套除了iframe还能用什么方法_CTF|有关CSP绕过的方法
weixin_39789042的博客
11-20 3235
CSP 0️⃣CSP的由来？一个简单的 XSS 漏洞页面，没有对用户的输入进行过滤，就像这样：<form> <input type="text" name="name" value="<?php echo $_GET["name"]; ?>" /> <input type="submit" value="Submit" /> <...
div+ajax实现类似iframe功能
墨尔本,晴
08-01 378
[code="java"]function showAtRight(url) { sendRequest(url); } var request=false; try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new Activ...
分享20多个很棒的jQuery 文件上传插件或教程
10-28
本文将介绍20多个优秀的jQuery文件上传插件或相关的教程。这些插件可以帮助开发者实现更为复杂的文件上传功能，例如上传进度条显示、文件拖拽上传、图像自动缩略图生成和上传分块等。通过集成这些插件，可以极大地...
PHP实现多图上传(结合uploadify插件)思路分析
10-21
当用户在页面上点击“保存”按钮时，所有图片的路径（存储在名为`product_img`的数组中）将被一起发送到服务器。PHP脚本接收到这些数据后，应将其保存到数据库中，以持久化图片信息。 在PHP代码中，可以看到一个...
以div代替frameset，用css实现仿框架布局
03-18
在网页设计领域，传统的`frameset`是一种用于创建多窗口布局的HTML元素，它允许页面被分割成多个独立的部分，每个部分可以加载不同的内容。然而，`frameset`在现代Web开发中逐渐被淘汰，主要是因为它存在一些问题，...
专题资料（2021-2022年）DreamweaverCS5自学教程第六课框架结构.doc
10-07
多个框架组合在一起就形成了框架集（Frameset），它可以将浏览器窗口划分为不同部分，每个部分显示不同的内容。例如，一个常见的左右结构框架集由三个文件构成：外部的框架集文件（如index.htm）以及两个显示在框架...
用DIV仿iframe框架布局效果
03-21
用DIV仿iframe框架布局效果
html5 div模仿iframe布局框架
03-04
使用div标签来给网页划分框架模板。这个框架可以嵌套在任何div标签内，或者iframe框架内
iframe使用（可合并）
sun_qqq的博客
05-10 197
2、父级iframe向子iframe传值。1、子级iframe给父级传递参数。
前端模块化详解(完整版)
weixin_30677475的博客
12-26 110
原文链接： https://github.com/ljianshu/Blog/issues/48 前言 在 JavaScript 发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今 CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着 web2.0 时代的到来，Ajax 技术得到广泛应用，jQuery 等前端库层出不穷，前端代码日益膨胀，此时在 JS 方...
Vue 多系统切换实现方案(iframe嵌套的两三事)
weixin_34331102的博客
06-04 3013
前言 公司分好几个后台模块，统一使用vue+elementUi框架开发，每一个后台模块都是单独团队开发的。并且几个系统整体的风格、布局一样的，包括左侧边栏，上方的面包屑等用户在使用的时候，可能要切换别的系统就要在浏览器里，新打开窗口，再输入网址，回车。总结来说，低效，所以现在想将几个系统融合到一个里边，并且每次切换系统的时候保留用户的操作...
嵌入页面除了iframe还有什么_月相表除了“美”还有什么？
weixin_39943000的博客
11-27 167
[腕表之家 钟表文化]先 回答“月相表除了'美'还有什么？”这个问题，答案是：除了美它的实际意义并不高，虽然有的品牌会在性能、准确性上大下功夫，但是我们大多数人选择一枚月相表的时候还是因为它足够好看的外观、综合实力才去选择它的。说到月相，不如我们先来认识月亮。月的阴晴圆缺你知道人的肉眼最远能看到多远的距离？近至十里之外远处的山脉远至千里之上的云彩、万里以外的月球。自古以来，月球与人类的关系就十分“...
动态实时创建iframe, 实现类似sandbox的在线编程效果
阿豪
11-21 216
原文链接: 动态实时创建iframe, 实现类似sandbox的在线编程效果 ...
frameset框架、iframe内嵌框架
qindayong
04-08 638
frameset框架、iframe内嵌框架 1、frameset定义 frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。必须使用 cols 或 rows 属性。 2、■ 框架概念 ： 所谓框架便是网页画面分成几个框窗，同时取得多个 URL。只需要frameset fram...
页面多个iframe
09-13
页面中使用多个iframe的目的是为了将不同的网页内容嵌入到当前页面中。通过使用iframe，可以将其他网页或者文档嵌入到当前页面的指定位置。 在HTML中，可以使用以下代码来创建一个iframe： ```html <iframe src=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值