-
Dreamweaver怎么实现一个网页内包含多个页面的效果?
2020-09-24 16:56:01Dreamweaver怎么实现一个网页内包含多个页面的效果?Dreamweaver设计网页页面的时候,想要一个网页包含多个页面,该怎么实现呢?我们可以使用框架实现,下面我们就来看看详细的教程,需要的朋友可以参考下 -
网页的一个页面中显示另一个页面
2018-10-20 19:56:42内联框架:HTML内联框架是为了实现在网页中显示网页,突出了内联二字,就是在一个网页中,我们能够控制在这个网页中用多大的框去显示另外一个网页,并且能通过CSS对其进行控制。 2、两种应用场景: (1)固定右侧...1、定义
内联框架:HTML内联框架是为了实现在网页中显示网页,突出了内联二字,就是在一个网页中,我们能够控制在这个网页中用多大的框去显示另外一个网页,并且能通过CSS对其进行控制。
2、两种应用场景:
(1)固定右侧或左侧按钮,修改另一侧或网页中某个部分的内容
(2)网站中很多页面都用到相同的代码,例如页脚
3、使用<iframe>
编写footer.html用来公用的页脚
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>poesy_footer</title> <link href="css/footer.css" rel="stylesheet" type="text/css"> </head> <body> <footer> <div class="footer_me"> <a>关于我</a> <em>·</em> <a>我的博客</a> <em>·</em> <a>联系我</a> <em>·</em> <a>关于我</a> <em>·</em> <em>·</em> </div> <p> Copyright 2018*** All Rights Reserved <a href="http://www.miitbeian.gov.cn/" target="_blank">*ICP备*******号</a> </p> </footer> </body> </html>
css修饰:
footer{ width: 100%; margin: 1em auto; } footer > .footer_me{ width: 50%; font-size: 14px; margin: 0px auto; color: #787878; } footer > p{ font-size: 12px; width: 60%; margin: 0px auto; color: #787878; }
到需要用到网页进行引用:<iframe>这里面写的字是防止不识别浏览器标签,做的预防性替换文本</iframe>
<footer> <iframe src="../footer.html"> <p> Copyright 2018*** All Rights Reserved <a href="http://www.miitbeian.gov.cn/" target="_blank">**ICP备******号</a> </p> </iframe> </footer>
引用网页css修饰:
/*-----------------------------------------------------脚部css*/ footer{ width: 100%; } footer > iframe{ width: 100%; height: 4.5em; border: 0px; }
4、大功告成。
-
python 多人网页会话_多页面共用sessionStorage的实现
2020-12-10 15:35:24sessionStorage的局限:sessionStorage是页面级别的,仅在一个标签页生效,如果同一个浏览器同时打开多个标签页,且都访问同一个域名,sessionStorage是不会在这多个标签页共用的,即每个标签页都有自己的...sessionStorage的局限:
sessionStorage是页面级别的,仅在一个标签页生效,如果同一个浏览器同时打开多个标签页,且都访问同一个域名,sessionStorage是不会在这多个标签页共用的,即每个标签页都有自己的sessionStorage。
如果想突破这种局限,实现多tab页共享存取数据同时又有sessionStorage暂存性的功能(关闭页面时存在里面的数据也消失的功能),则需要自己通过一些技巧实现手动维护多tab页面内存储某个对象的数据,就是目前我想要讲的方法。
方法:通过给localStorage存储数据,可以在全浏览器内捕获一个storag的事件,然后再拿到该事件传过来的数据进行本地修改维护,多个tab页就以此通信,同步数据。
实现(es6 模块):const MemoryStorage = class {
constructor(){
this._data = {};
}
setItem(k, v){
this._data[k] = v;
MemoryStorage.dataSendHandler( this._data );
}
getItem(k){
return this._data[k];
}
removeItem(k){
delete this._data[k];
MemoryStorage.dataSendHandler( this._data );
}
clear(){
this._data = {};
MemoryStorage.dataSendHandler( this._data );
}
getData() {
return this._data;
}
setData(data) {
this._data = data
}
mergeToData(data) {
for(let k in data) {
this._data[k] = data[k]
}
}
static dataSendHandler( data ){
localStorage.setItem('setMemoryStorage', JSON.stringify(data));
localStorage.removeItem('setMemoryStorage');
}
static dataGetHandler(){
localStorage.setItem('getMemoryStorage', new Date().getTime());
localStorage.removeItem('getMemoryStorage');
}
}
const initMemoryStorage = function(){
var memoryStorage = new MemoryStorage();
window.addEventListener('storage',function(e){
if( e.newValue===null ) return false;
if(e.key == 'getMemoryStorage'){
console.log('有其他页面取memory')
MemoryStorage.dataSendHandler( memoryStorage.getData() );
}
else if(e.key == 'setMemoryStorage'){
let data = JSON.parse(e.newValue);
if( isEmptyObj(data) ){
console.log('memory被清空了')
memoryStorage.setData({});
}else{
console.log('memory被修改了')
memoryStorage.mergeToData(data)
}
}
})
if( isEmptyObj(memoryStorage.data) ){
MemoryStorage.dataGetHandler();
}
return memoryStorage;
}
function isEmptyObj(obj){
for(let i in obj){
return false;
}
return true;
}
export default initMemoryStorage;
npm引入npm install multitabstorageimport memory from 'multitabstorage'
window.memoryStorage = memory();
window.memoryStorage.setItem('Auth', 'as00f0e058585856d'); //存入Auth
var Auth = window.memoryStorage.getItem('Auth'); //获取Auth
window.memoryStorage.removeItem('Auth'); //删除Auth
window.memoryStorage.clear(); //清空storage
此时memoryStorage基本实现了sessionStorage的基础功能,setItem, getItem,removeItem,clear。
script标签引入var memoryStorage = multitabstorage();
memoryStorage = memory();
memoryStorage.setItem('Auth', 'as00f0e058585856d'); //存入Auth
var Auth = memoryStorage.getItem('Auth'); //获取Auth
memoryStorage.removeItem('Auth'); //删除Auth
memoryStorage.clear(); //清空storage#### github地址
https://github.com/JhonMr/multitabstorage
-
使用frame框架,实现一个网页显示多个界面使用js语言,实现事件响应
2017-07-18 19:32:39本次项目是利用frame框架实现一个网页显示多个界面: 1.首先在index.jsp文件中注释掉标签: 因为inde.jsp是第一个显示的界面,你也可以在需要开始使用框架的界面这样干! 添加如下代码: 其中,cols属性表示...一个网页如何显示多个界面?
如何利用网页显示页面的资源?
如何让用户打开最少的页面,显示最多的信息?
本次项目是利用frame框架实现一个网页显示多个界面:
1.首先在index.jsp文件中注释掉<body>标签:
因为inde.jsp是第一个显示的界面,你也可以在需要开始使用框架的界面这样干!
添加如下代码:
其中,cols属性表示把整个页面分为1/5和4/5,<frameset cols="1,4"> <frame src="mianht.html" name="left"> <frame src="main.html" name="right"> </frameset>
第一个scr属性表示左面1/5需要显示的界面,名字为left
第二个scr属性表示右面1/5需要显示的界面,名字为right
2.新建mianht.html和main.html文件其中main.html只显示内容二字:
mianht.html显示三个跳转标签:<body> 内容 </body>
效果如下:<body> <a href="MyHtml.html" target="right">第一题</a><p> <a href="index.html" target="right">第二题</a><p> <a href="fun.html" target="right">第三题</a><p> </body>
3.新建MyHtml.html文件:
这个界面显示如下界面:<style type="text/css"> #table{ width: 300px; height: 300px; border: 1px solid black; } #A{ width: 100px; height: 200px; text-align: center; background-color: red; color: green; font-family: fantasy; font-size: 30px; border: 1px solid black; } #B{ width: 200px; height: 100px; text-align: center; background-color: orange; color: blue; font-family: fantasy; font-size: 30px; border: 1px solid black; } #C{ width: 100px; height: 100px; text-align: center; background-color: yellow; color: black; font-family: fantasy; font-size: 30px; border: 1px solid black; } #D{ width: 100px; height: 200px; text-align: center; background-color: green; color: white; font-family: fantasy; font-size: 30px; border: 1px solid black; } #E{ width: 200px; height: 100px; text-align: center; background-color: blue; color: white; font-family: fantasy; font-size: 30px; border: 1px solid black; } </style> </head> <body> <table id="table" align="center"> <tr> <td id="A" rowspan="2"> <b>A</b> </td> <td id="B" colspan="2"> <b>B</b> </td> </tr> <tr> <td id="C"> <b>C</b> </td> <td id="D" rowspan="2"> <b>D</b> </td> </tr> <tr> <td id="E" colspan="2"> <b>E</b> </td> </tr> </table> </body>
4.新建index.html:
再次使用到了框架, 把右面4/5页面再次分为整个页面的1/5和3/5<FRAMESET cols="1,3"> <FRAME src="content.html" name="content"> <FRAME src="main.html" name="content1"> </FRAMESET>
5.新建content.html:
css样式:
去掉下划线<STYLE> A{ text-decoration: none; } </STYLE>
HTML中:
<a>跳转链接<body> <a href="file1.html" target="content1">文件1</a><p> <a href="file2.html" target="right">文件2</a><p> </body>
效果如下:点击文件1:
点击文件2:
文件1:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>file1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> file1 </body> </html>
文件2:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>file2.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> file2 </body> </html>
6.实现第三题:
在使用js语言添加响应方法:<body> <form name="form1" οnsubmit="foo();"> <table align="center"> <tr> <td> <table align="center"> <tr> <td><input type="radio" name="mradio"> <b>1</b></td> <td><input type="radio" name="mradio"> <b>2</b></td> <td><input type="radio" name="mradio"> <b>3</b></td> </tr> <tr> <td><input type="radio" name="mradio"> <b>4</b></td> <td><input type="radio" name="mradio"> <b>5</b></td> <td><input type="radio" name="mradio"> <b>6</b></td> </tr> <tr> <td><input type="radio" name="mradio"> <b>7</b></td> <td><input type="radio" name="mradio"> <b>8</b></td> <td><input type="radio" name="mradio"> <b>9</b></td> </tr> </table></td> </tr> <tr> <td> <table align="center" style="border: 2px solid black;text-align: center;" width="300px" height="300px"> <tr> <td rowspan="2" style="color: green;background-color: red;width: 100px;height: 200px;border: 2px solid black;text-align: center;" align="center"><input type="radio" name="mradio"> <b>A</b> </td> <td colspan="2" width="200px" height="100px" style="border: 2px solid black;text-align: center;background-color: orange;color: blue;" align="center"><input type="radio" name="mradio"> <b>B</b> </td> </tr> <tr> <td width="100px" height="100px" style="border: 2px solid black;background-color: yellow;color: red;text-align: center;" align="center"><input type="radio" name="mradio"> <b>C</b> </td> <td rowspan="2" width="100px" height="200px" style="background-color: green;color: black;text-align: center;border: 2px solid black;" align="center"><input type="radio" name="mradio"> <b>D</b> </td> </tr> <tr> <td colspan="2" height="100px" width="200px" style="border: 2px solid black;background-color: blue;color: white;text-align: center;" align="center"><input type="radio" name="mradio"> <b>E</b> </td> </tr> </table></td> </tr> <tr> <td align="center"><input type="submit" value="提交" style="text-align: center;" align="middle"></td> </tr> </table> </form> </body>
实现的效果:<script type="text/javascript"> function foo() { var rdo = document.form1.mradio; //var a = rdo; for ( var i = 0; i < rdo.length; i++) { document.write("不是这个"); if (rdo[i].checked) { //document.write("是这个"); if (i >= 9) { var str; switch (i) { case 9: str = "A"; break; case 10: str = "B"; break; case 11: str = "C"; break; case 12: str = "D"; break; case 13: str = "E"; break; } alert("您选择了" + str); } else { alert("您选择的是第" + (i + 1) + "个单选框"); } } } } </script>
效果2:
-
移动端网页实现返回按钮跳转到多个指定页面
2019-03-29 16:48:09有时候需要在用户点击返回的时候跳转到指定页面,并且再次返回到另一个指定页面,不再返回当前页。 例如有A,B,C三个网页,其中B为第三方网页,比如百度,需求如下: 首页是A,从A进来点击返回按钮后需跳转到B, 再次...在微信网页开发中,经常会用到返回按钮
有时候需要在用户点击返回的时候跳转到指定页面,并且再次返回到另一个指定页面,不再返回当前页。
例如有A,B,C三个网页,其中B为第三方网页,比如百度,需求如下:
首页是A,从A进来点击返回按钮后需跳转到B, 再次点击返回需要跳转到C,C页面返回后又进入B, 依次在B,C间循环。不再出现A页面。
具体代码:
A:
-
使用原生的popstate方法
(function () { if (!window.history.pushState || !document.dispatchEvent) return; var href = location.href; var flag = true; var voidFn = function () { }; var fn = voidFn; var dispatchFn = function () { var evt = document.createEvent('Event'); evt.initEvent('popstate', true, true); window.dispatchEvent(evt); }; window.addEventListener('load', function () { history.replaceState({}, '', '/C.php');//不能跨域,可在本地脚本中进行跳转 history.pushState({}, '', href); window.addEventListener('popstate', function () { dispatchFn = voidFn; if (!flag) { $.get("/xx/hit", { origin: xxx, type:xxx, param: xxx }, function () { location.href = "https://blog.csdn.net/weixin_43627766/article/details/88852079";//B网站 }); } flag = false; }, false); setTimeout(function () { fn = dispatchFn; fn(); }, 20); }, false);
})();
-
使用jquery.history.js库(需要引入jquery.history.js文件)
$(function(){ var hashurl = C if (!window.history.pushState || !document.dispatchEvent) exit(); var href = location.href; var enable = true; var replace = "/jumpC.php?url=" + hashurl;//跳转到C的本地脚本 var redirect = "https://blog.csdn.net/weixin_43627766/article/details/88852079";//B网站 history.replaceState({}, '', replace); history.pushState({}, '', href); History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate //popstate有一定的兼容性限制 if (!enable) { location.href = redirect; } enable = false; }); });
C页面:
(function () { if (!window.history.pushState || !document.dispatchEvent) return; var href = location.href; var flag = true; var voidFn = function () { }; var fn = voidFn; var dispatchFn = function () { var evt = document.createEvent('Event'); evt.initEvent('popstate', true, true); window.dispatchEvent(evt); }; window.addEventListener('load', function () { history.pushState({}, '', href); window.addEventListener('popstate', function () { dispatchFn = voidFn; if (!flag) { location.href = B } flag = false; }, false); setTimeout(function () { fn = dispatchFn; fn(); }, 20); }, false); })();
总结
返回页主要注意pushState和replaceState的灵活使用
前者是网历史记录后面添加,后者是清空记录并替换。 -
-
多个html页面拼接成一个页面_【JavaWeb】111:详情页面的实现
2020-12-05 09:45:07话不多说,开始今天的学习:我们浏览网页时看到的数据无外乎两种:静态数据和动态数据。静态数据是将数据给写死了,需要修改时得去改对应的某个页面。而动态数据是需要去数据库查询的,其数据是随着数据库中的数据... -
javascript实现一个网页加载进度loading
2020-11-26 14:39:30网页loading有很多用处,比如页面的加载进度,数据的加载过程等等,数据的加载loading很好做,只需要在加载数据之前(before ajax)显示loading效果,在数据返回之后(ajax completed)结束loading效果,就可以了。... -
控制网页frame vba_实现一个简单的html网页预览器
2020-12-07 17:21:11本次分享实现一个简单的页面图片加载功能,展示所用精美图片用pyecharts绘制,更多美图可关注公众号Python与算法社区获取源代码。本次代码结构由两个文件组成,主页面设置控制键和功能函数,通过页面鼠标点击事件... -
一个可以实现第三方登录的网页代码.html
2019-07-18 17:48:47一个可以让你轻轻松松实现网页第三方QQ登录的例子,本案例默认通过本页面跳转的形式,当然了,也提供了小窗口跳转的形式,只需要注释和放开注释即可,本逻辑基本上可以用于微博 人人网等多平台 的登录套路 -
html简单网页模板代码_实现一个简单的html网页预览器
2021-01-20 11:25:54本次分享实现一个简单的页面图片加载功能,展示所用精美图片用pyecharts绘制,更多美图可关注公众号Python与算法社区获取源代码。本次代码结构由两个文件组成,主页面设置控制键和功能函数,通过页面鼠标点击事件... -
实现一个网页加载进度loading
2019-03-20 16:38:13loading随处可见,比如一个app经常会有...网页loading有很多用处,比如页面的加载进度,数据的加载过程等等,数据的加载loading很好做,只需要在加载数据之前(before ajax)显示loading效果,在数据返回之后(aj... -
Django实战(2)——Django视图初步(多个页面,超链接至另一个网页,基本的文本显示)
2019-07-21 15:36:24它实现了网站的发布以及内网所有用户可以访问的要求,还有一个hello World页面。 这一篇博文主要讨论建立多张页面显示文本,从一张网页超链接至另一张。以一个投票网站为例。 第一步 注释:polls/view.py文件和... -
Flask Web 开发学习笔记之(6)flask创建路由的.py文件:返回链接的视图...实现一个网页的链接转到另一个页面...
2020-09-22 11:49:26一个创建路由的.py文件可以包含多个视图函数 视图函数return 返回的HTML代码中带有链接,即标签tag是 <a herf ='/链接网页的URL'>链接要显示的文本</a> 注意:此处的tag是a,而不是h1,如果写成h1,则... -
网页制作:一个简易美观的登录界面
2016-03-09 17:22:59这次来总结一下公司的Task 1 实现一个登录界面。 登录界面其实在大三的时候就有做过,但是当时做的界面超级low,主要区别在于有无css,由于公司的设计要求,对于该界面的很多细节处理实在不容易。所以,还是想要写... -
微信微擎的网页oauth的授权如何实现多个域名的转换
2018-06-07 00:34:52需求是这样的 现在有3个不同的域名,一个认证的微信公众号,由于公众号授权回调页面域名只能写一个,因此对于我有多个微擎系统分别部署在不同服务器上(一台做营销业务、一台做分销系统、一台做餐饮系统),分别部署... -
python实现多个网页链接的表格循环获取功能
2020-10-21 11:53:49问题描述:实现多个网页的表格获取,并保存为excel表,excel表分页sheet分别以XX 命名,对应于上面的获取表格的名称。 已实现功能:单个页面表格的读取和保存; 未实现功能:循环网页,sheet改名。 请大神帮忙改... -
网页设计如何排成一列_Web页面中八种创建多列等高(等高列布局)的实现技术
2021-01-17 05:24:48高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了。但是,如果一个或多个列需要单独设置... -
如何为自己的网页实现一个“回到顶部”的链接?
2019-09-22 07:23:30“回到顶部”是目前内容比较多的网页常用的解决方式,能快速让用户回到页面的顶端。比如我经常去的旅游网站——马蜂窝,就有一个非常不错的“回到顶部”快捷按钮或者叫链接,特别喜欢这个火箭的图片,“回到顶部”不... -
网页页面蒙版实现
2016-04-07 17:20:00这个页面除了底层的布局,主要的工作是蒙版的实现,这种特效很常见到,淘宝改版的时候会弹出也是这种效果,引导剁手党熟悉新布局和功能,以便让他们更好的败家。还有好多app也有这种效果,多是领取每日任务之类的... -
selenium操作一个页面的多个并列文章
2021-02-22 12:31:45python selenium操作一个页面的多个并列文章实现目标方法重点代码:最后 实现目标 对于一个网页中有一连串的文章,想要获取这一连串的文章,通过selenium自动化实现某些功能 方法 右击网页—>检查—>... -
python的urllib2实现登录网页_使用Python(urllib2和cookielib)登录具有多个页面的网站...
2020-12-24 20:40:43我正在编写一个脚本,从我的银行的家庭银行网站检索交易信息,以便在个人移动应用程序中使用。在网站的布局如下:https://homebanking.purduefed.com/OnlineBanking/Login.aspx文件->输入用户名->提交表单-&... -
Signalr 实现网页数据的实时刷新(MVC模式)多个客户端也行的
2021-02-19 15:17:112.右击项目,管理NuGet程序包,搜索SignalR 下载第一个,会自动生成一个Scripts文件夹,里面包含jquery.signalR-2.3.0.min.js类似版本的js文件,后续html页面引用该文件 3.添加新建项->Web->SignalR集线器类... -
网页中页面的最佳宽度CSS实现
2018-12-19 20:40:00那么,采用弹性布局,实现网页宽度自适应是一个不错的选择。 在做弹性布局时,最重要的也就是body标签或者最外层的div区域的设置。 margin: 10px auto; 这样可以保证网页在任何分辨率下都会居中。 min-width... -
用vue实现一个相册网页_vue做一个图片上传预览的组件,附vue-router基础用法
2020-12-29 10:00:47之前发了一篇关于自己看待前端组件化的文章,但是由于学习和实践的业务逻辑差异,所以自己练习的一些demo逻辑比较简单,打算用vue重构现在公司做的项目,所以在一些小的功能页面上使用vue来做的,现在写的这个是项目... -
Spring Security5 学习3 - 实现多个登陆页面
2020-04-10 20:33:20在一个网页应用中,我们经常需要做到不同的用户有不同的登录页面,以及登陆之后展示不同的页面;不同的用户之间不能访问互相访问网址等等。这里就需要 Spring Security 来实现多个登陆页面。 这里首先使用 idea 创建... -
vue webpack 网页标题_electron-vue利用webpack打包实现多页面的入口文件
2021-01-17 15:22:38项目需要在electron的项目中新打开一个窗口,利用webpack作为静态资源打包器,发现在webpack中可以设置多页面的入口,今天来讲一下我在electron中利用webpack建立多页面入口的踩坑经验。1、webpack的核心概念Entry:... -
借助cookie实现子网页修改父网页内容遇到的问题:同一个浏览器访问相同页面,会互相影响。 (已解决)...
2016-10-10 22:12:00问题是这样的, 我把左侧菜单做成了网页, 然后点击左侧菜单... 但是, 如果同一个浏览器多个此网页打开,点击左侧选项会互相干扰。 所以, 我想到新增一个cookie来区分之前的cookie。 看下图: 这样,...
-
音视频同步方法
-
linux c 进程间通信 消息队列
-
【并发容器】3 CopyOnWriteArrayList
-
297. 二叉树的序列化与反序列化
-
信息安全管理与信息安全体系实践.ppt
-
题目3:文本文件单词的检索与计数(实验准备)
-
linux c 通过FTP 协议上传文件 源码 亲测可用
-
ELF视频教程
-
MySQL 管理利器 mysql-utilities
-
基于Qt的LibVLC开发教程
-
华为1+X——网络系统建设与运维(高级)
-
SIMATIC_S7PLCSIM_V14_SP1.001
-
自制的mnist数据集
-
Editor.md图片跨域问题
-
UVA548 Tree
-
信息安全风险评估培训教材.ppt
-
Element UI —— el-form 自定义验证规则
-
Flume--相关图例
-
jdk-9.0.4_Wind-x64.zip
-
LVS + Keepalived 实现 MySQL 负载均衡与高可用