精华内容
下载资源
问答
  • Dreamweaver怎么实现一个网页内包含多个页面的效果?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、大功告成。

    展开全文
  • sessionStorage局限: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框架实现一个网页显示多个界面: 1.首先在index.jsp文件中注释掉标签: 因为inde.jsp是第一个显示界面,你也可以在需要开始使用框架界面这样干! 添加如下代码: 其中,cols属性表示...

    一个网页如何显示多个界面?

    如何利用网页显示页面的资源?

    如何让用户打开最少的页面,显示最多的信息?


    本次项目是利用frame框架实现一个网页显示多个界面:

    1.首先在index.jsp文件中注释掉<body>标签:

    因为inde.jsp是第一个显示的界面,你也可以在需要开始使用框架的界面这样干!

    添加如下代码:

     <frameset cols="1,4">
      	<frame src="mianht.html" name="left">
      	<frame src="main.html" name="right">
      </frameset>
    其中,cols属性表示把整个页面分为1/5和4/5,

    第一个scr属性表示左面1/5需要显示的界面,名字为left

    个scr属性表示面1/5需要显示的界面,名字为right
    2.新建mianht.html和main.html文件

    其中main.html只显示内容二字:

     <body>
       	内容
      </body>
    mianht.html显示三个跳转标签:

    <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:

    <FRAMESET cols="1,3">
      		<FRAME src="content.html" name="content">
      		<FRAME src="main.html" name="content1">
    </FRAMESET>
    再次使用到了框架, 把右面4/5页面再次分为整个页面的1/5和3/5

    5.新建content.html:

    css样式:

    <STYLE>
      			A{
      				text-decoration: none;
      			}
    </STYLE>
    去掉下划线
    HTML中:

    <body>
      		<a href="file1.html" target="content1">文件1</a><p>
      		<a href="file2.html" target="right">文件2</a><p>
    </body>
    <a>跳转链接
    效果如下:



    点击文件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.实现第三题:

    <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>
    
    在使用js语言添加响应方法:

    <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:







    展开全文
  • 有时候需要在用户点击返回时候跳转到指定页面,并且再次返回到另一个指定页面,不再返回当前页。 例如有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的灵活使用
    前者是网历史记录后面添加,后者是清空记录并替换。

    展开全文
  • 话不说,开始今天学习:我们浏览网页时看到数据无外乎两种:静态数据和动态数据。静态数据是将数据给写死了,需要修改时得去改对应某个页面。而动态数据是需要去数据库查询,其数据是随着数据库中数据...
  • 网页loading有很用处,比如页面的加载进度,数据的加载过程等等,数据的加载loading很好做,只需要在加载数据之前(before ajax)显示loading效果,在数据返回之后(ajax completed)结束loading效果,就可以了。...
  • 本次分享实现一个简单的页面图片加载功能,展示所用精美图片用pyecharts绘制,更美图可关注公众号Python与算法社区获取源代码。本次代码结构由两个文件组成,主页面设置控制键和功能函数,通过页面鼠标点击事件...
  • 一个可以让你轻轻松松实现网页第三方QQ登录例子,本案例默认通过本页面跳转形式,当然了,也提供了小窗口跳转形式,只需要注释和放开注释即可,本逻辑基本上可以用于微博 人人网等平台 登录套路
  • 本次分享实现一个简单的页面图片加载功能,展示所用精美图片用pyecharts绘制,更美图可关注公众号Python与算法社区获取源代码。本次代码结构由两个文件组成,主页面设置控制键和功能函数,通过页面鼠标点击事件...
  • loading随处可见,比如一个app经常会有...网页loading有很用处,比如页面的加载进度,数据的加载过程等等,数据的加载loading很好做,只需要在加载数据之前(before ajax)显示loading效果,在数据返回之后(aj...
  • 实现了网站发布以及内网所有用户可以访问要求,还有一个hello World页面。 这一篇博文主要讨论建立页面显示文本,从一张网页超链接至另一张。以一个投票网站为例。 第一步 注释:polls/view.py文件和...
  • 一个创建路由.py文件可以包含多个视图函数 视图函数return 返回HTML代码中带有链接,即标签tag是 <a herf ='/链接网页的URL'>链接要显示文本</a> 注意:此处tag是a,而不是h1,如果写成h1,则...
  • 网页制作:一个简易美观登录界面

    万次阅读 多人点赞 2016-03-09 17:22:59
    这次来总结一下公司Task 1 实现一个登录界面。 登录界面其实在大三时候就有做过,但是当时做界面超级low,主要区别在于有无css,由于公司设计要求,对于该界面细节处理实在不容易。所以,还是想要写...
  • 需求是这样 现在有3个不同域名,一个认证微信公众号,由于公众号授权回调页面域名只能写一个,因此对于我有多个微擎系统分别部署在不同服务器上(一台做营销业务、一台做分销系统、一台做餐饮系统),分别部署...
  • 问题描述:实现多个网页的表格获取,并保存为excel表,excel表分页sheet分别以XX 命名,对应于上面获取表格名称。 已实现功能:单个页面表格读取和保存; 未实现功能:循环网页,sheet改名。 请大神帮忙改...
  • 高度相等列在Web页面设计中永远是一个网页设计师需求。如果所有列都有相同背景色,高度相等还是不相等都无关紧要,因为你只要在这些列父元素中设置一个背景色就可以了。但是,如果一个或多个列需要单独设置...
  • “回到顶部”是目前内容比较网页常用的解决方式,能快速让用户回到页面的顶端。比如我经常去的旅游网站——马蜂窝,就有一个非常不错的“回到顶部”快捷按钮或者叫链接,特别喜欢这个火箭的图片,“回到顶部”不...
  • 网页页面蒙版实现

    2016-04-07 17:20:00
    个页面除了底层的布局,主要的工作是蒙版的实现,这种特效很常见到,淘宝改版的时候会弹出也是这种效果,引导剁手党熟悉新布局和功能,以便让他们更好的败家。还有好多app也有这种效果,是领取每日任务之类的...
  • selenium操作一个页面的多个并列文章

    热门讨论 2021-02-22 12:31:45
    python selenium操作一个页面的多个并列文章实现目标方法重点代码:最后 实现目标     对于一个网页中有一连串的文章,想要获取这一连串的文章,通过selenium自动化实现某些功能 方法 右击网页—>检查—>...
  • 我正在编写一个脚本,从我银行家庭银行网站检索交易信息,以便在个人移动应用程序中使用。在网站布局如下:https://homebanking.purduefed.com/OnlineBanking/Login.aspx文件->输入用户名->提交表单-&...
  • 2.右击项目,管理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...
  • 之前发了篇关于自己看待前端组件化文章,但是由于学习和实践业务逻辑差异,所以自己练习一些demo逻辑比较简单,打算用vue重构现在公司做项目,所以在一些小功能页面上使用vue来做,现在写是项目...
  • 一个网页应用中,我们经常需要做到不同用户有不同登录页面,以及登陆之后展示不同的页面;不同用户之间不能访问互相访问网址等等。这里就需要 Spring Security 来实现多个登陆页面。 这里首先使用 idea 创建...
  • 项目需要在electron的项目中新打开一个窗口,利用webpack作为静态资源打包器,发现在webpack中可以设置多页面的入口,今天来讲一下我在electron中利用webpack建立页面入口的踩坑经验。1、webpack的核心概念Entry:...
  • 问题是这样, 我把左侧菜单做成了网页, 然后点击左侧菜单... 但是, 如果同一个浏览器多个网页打开,点击左侧选项会互相干扰。  所以, 我想到新增一个cookie来区分之前cookie。 看下图:    这样,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,251
精华内容 1,300
关键字:

一个网页多个页面的实现