精华内容
下载资源
问答
  • 主要为大家详细介绍了利用HTML5里的window.postMessage在两个网页间传递数据的相关资料,postMessage API的功能是可以让你在两个浏览器窗口或iframe之间传递信息数据,对postMessage感兴趣的小伙伴们可以参考一下
  • 实现两个select之间内容的互换实测通过,很好用
  • DOMTree相似性 这是一个Java应用程序,是我的本科论文的实现。 它比较两个HTML-DOM树,然后计算它们的设计之间的相似度比率,这也是两个网页设计之间的相似度问题的答案。
  • js搞定两个网页之间值的传递

    千次阅读 2016-03-28 13:42:25
    假设我们有两个网页a.html和b.html,在a页面中点击一个超链接或者按钮跳转到b页面,并传递一个地址给b页面,b页面接收到地址后进行跳转到接收的地址 首先,在a页面中插入一个超链接 超链接名称,随便填 例如 百度...


    假设我们有两个网页a.html和b.html,在a页面中点击一个超链接或者按钮跳转到b页面,并传递一个地址给b页面,b页面接收到地址后进行跳转到接收的地址


    首先,在a页面中插入一个超链接

    <a href=跳转的页面?参数名=值>超链接名称,随便填</a>
    例如
    <a href="b.html?test=http://www.baidu.com">百度</a>


    然后在b页面用js接收传递的值

    <script>
    function getParameter(param)  
        {  
            var query = window.location.search;//获取URL地址中?后的所有字符  
            var iLen = param.length;//获取你的参数名称长度  
            var iStart = query.indexOf(param);//获取你该参数名称的真实索引  
            if (iStart == -1)//-1为没有该参数  
                return "";  
            iStart += iLen + 1;  
            var iEnd = query.indexOf("&", iStart);//获取第二个参数的其实索引  
            if (iEnd == -1)//只有一个参数  
                return query.substring(iStart);//获取单个参数的参数值  
            return query.substring(iStart, iEnd);//获取第二个参数的值  
        }  
      
    function link_jump()
    {
        var param = getParameter("test");  
    	
    	if(param!=""){       //如果传递的值不等于空就跳转
    		location.href=param;  
    	}
    	
    }
    
    //延时1S跳转,可自行修改延时时间
    setTimeout(link_jump, 1000);
    </script>


    效果图:


    展开全文
  • html和js实现两个html之间传值

    千次阅读 2019-02-28 13:37:14
    分成两个独立的项目部署,因项目是个人项目,客户端展示不考虑使用像Angular、Vue、Native这种前端框架实现,于是全部使用静态页面实现,请求数据用ajax,在开发的过程中,就遇到了页面之间传值的问题。 解决方法 ...

    关于html页面之间传值的几种方式

    问题

    因最近尝试实现客户端与服务端分离,服务端只提供接口,客户端用html+js实现,分成两个独立的项目部署,因项目是个人项目,客户端展示不考虑使用像Angular、Vue、Native这种前端框架实现,于是全部使用静态页面实现,请求数据用ajax,在开发的过程中,就遇到了页面之间传值的问题。

    解决方法

    post提交表单跳转的方式肯定不行了,因服务端并不处理这些请求参数,连到达客户端的机会都没有,此时只能考虑get方式了,因get方式参数在url上,跳转后的页面肯定能获取到。还有一种思路,就是将参数存到一个公共的地方,页面都可以获取到,按这两种思路,总结了如下的解决方法。

    1、get方式,url携带参数

    可以通过window.location.search获取url上的参数。如下面的示例。

     

    a.html

     

    <a href="./b.html?a=1&a=2&username=zhangsan&password=123&=">跳转</a> 

     

    b.html


    <script type="text/javascript" src="./js/getUrlParam.js"></script> 
    <script> 
      var a = UrlParam.paramValues("a"); 
      console.log(a); 
    </script>

     

    getUrlParam.js

    UrlParam = function() { // url参数 
      var data, index; 
      (function init() { 
        data = []; //值,如[["1","2"],["zhangsan"],["lisi"]] 
        index = {}; //键:索引,如{a:0,b:1,c:2} 
        var u = window.location.search.substr(1); 
        if (u != '') { 
          var params = decodeURIComponent(u).split('&'); 
          for (var i = 0, len = params.length; i < len; i++) { 
            if (params[i] != '') { 
              var p = params[i].split("="); 
              if (p.length == 1 || (p.length == 2 && p[1] == '')) {// p | p= | = 
                data.push(['']); 
                index[p[0]] = data.length - 1; 
              } else if (typeof(p[0]) == 'undefined' || p[0] == '') { // =c 舍弃 
                continue; 
              } else if (typeof(index[p[0]]) == 'undefined') { // c=aaa 
                data.push([p[1]]); 
                index[p[0]] = data.length - 1; 
              } else {// c=aaa 
                data[index[p[0]]].push(p[1]); 
              } 
            } 
          } 
        } 
      })(); 
      return { 
        // 获得参数,类似request.getParameter() 
        param : function(o) { // o: 参数名或者参数次序 
          try { 
            return (typeof(o) == 'number' ? data[o][0] : data[index[o]][0]); 
          } catch (e) { 
          } 
        }, 
        //获得参数组, 类似request.getParameterValues() 
        paramValues : function(o) { // o: 参数名或者参数次序 
          try { 
            return (typeof(o) == 'number' ? data[o] : data[index[o]]); 
          } catch (e) {} 
        }, 
        //是否含有paramName参数 
        hasParam : function(paramName) { 
          return typeof(paramName) == 'string' ? typeof(index[paramName]) != 'undefined' : false; 
        }, 
        // 获得参数Map ,类似request.getParameterMap() 
        paramMap : function() { 
          var map = {}; 
          try { 
            for (var p in index) { map[p] = data[index[p]]; } 
          } catch (e) {} 
          return map; 
        } 
        } 
    }();

    此处代码参照:

    http://blog.csdn.net/caoyuan10036/article/details/7227214

    2、通过cookie,传递

    cookie能够存储少量数据到客户端的磁盘中,特定的网页之间是可以共享cookie中的数据。

    a.html

    <script type="text/javascript" src="./js/jquery.min.js"></script> 
    <script type="text/javascript" src="./js/jquery.cookie.js"></script> 
    <script> 
      $.cookie("a","12"); 
    </script>

    b.html

     

    <script type="text/javascript" src="./js/jquery.min.js"></script> 
    <script type="text/javascript" src="./js/jquery.cookie.js"></script> 
    <script> 
      var param = $.cookie("a"); 
      console.log(param); 
    </script>

    此处使用了jquery.cookie.js,具体用法可参照此篇文章:

    http://blog.csdn.net/csdn_ds/article/details/78022177

    3、window.open和window.opener之间传值

    window.open可以打开一个新的页面,在新的页面中可以通过window.opener获取父页面的窗口对象,从而可以获取父窗口中的参数。

    a.html

    <button id="open">打开新的页面</button> 
    <script> 
      $('#open').click(function () { 
        window.open('./b.html') 
      }) 
    </script>

    b.html

    <script>

       var content = window.opener.document.getElementById("open").innerHTML;  

      alert(content);  

    </script>  

    4、h5技术,window.localStorage存储数据

    在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。此方法类似cookie,将数据存在一个公共的地方,实现页面之间传值。

    a.html

    <input type="text" name="username" /> 
    <input type="button" name="" value="post" οnclick="set()"/> 
    <script> 
      function set() { 
        //由于是一个新的技术,你可以通过下面的代码检测你的浏览器是否支持 
        if (window.localStorage) { 
        //存储变量的值 
          localStorage.name = document.all.username.value; 
          location.href = './b.html'; 
        } else { 
          alert("NOT SUPPORT"); 
        } 
      } 
    </script>

     

     

    b.html

    <script> 
      var value = localStorage["name"]; 
      alert(value); 
    </script>

    总结

    对于不同的解决方法,都有优缺点

    1、url携带参数

    优点:取值方便,可以跨域,利于页面分享,没有环境限制。

    缺点:url携带参数值的长度有限制。

    2、cookie方式

    优点:可以在同源内的的任意网页中访问,存储数据的周期可以自由设置。

    缺点:有长度限制。

    3、设置窗口之间的父子关联关系

    优点:取值方便.只要window.opener指向父窗口,就可以访问所有对象.不仅可以访问值,还可以访问父窗口的方法.值长度无限制。
    缺点:两窗口要存在着关系.就是利用window.open打开的窗口。不能跨域。

    4、h5技术,window.localStorage存储数据

    优点:储存空间大,有5M存储空间。

    缺点:不是所有浏览器都支持。

    个人倾向第一种方式,主要是自己做的网页可以分享,在任何的地方都可以打开,其他的方式都有环境的要求。如果是做大型项目,架构是实现客户端与服务端的分离,建议还是引入客户端框架,框架实现了路由、参数的传递、以及安全问题,可以大大的提高开发效率。

    转自:http://blog.csdn.net/csdn_ds/article/details/78393564

    ps:几种方法我主要尝试了3种,第一种我没有深入学习过,cookie对我来说简单易懂,localstorage有兼容问题不敢深入,所以最后选了cookie。

     

    展开全文
  • JS实现两个页面之间的通信

    千次阅读 2017-12-14 20:25:53
    两个不同页面之间的通信,通过一个拖拽demo来模拟; 首先,写好基础的拖拽代码: [html] view plain copy script>   window.onload = function() {   var oDiv = document....

    两个不同页面之间的通信,通过一个拖拽demo来模拟;

    首先,写好基础的拖拽代码:

    [html]  view plain  copy
    1. <script>  
    2.    window.onload = function() {  
    3.        var oDiv = document.getElementById('div');  
    4.        oDiv.onmousedown = function(ev) {  
    5.            var ev = window.event || ev;  
    6.            var disX = ev.clientX - oDiv.offsetLeft;  
    7.            var disY = ev.clientY - oDiv.offsetTop;  
    8.            document.onmousemove = function(ev) {  
    9.               var factX = ev.clientX - disX;  
    10.               var factY = ev.clientY - disY;  
    11.               oDiv.style.left = factX + 'px';  
    12.               oDiv.style.top = factY + 'px';  
    13.               localStorage.json = JSON.stringify({left:oDiv.offsetLeft,top:oDiv.offsetTop});  
    14.           }  
    15.            document.onmouseup = function() {  
    16.                 document.onmousemove = null;  
    17.            }  
    18.        }  
    19.    }  
    20. </script>  

    这是将div拖动变化的值存入到本地储存localstorage,用JSON.stringify将其转为字符串形式:

     

    然后新建一个新建一个demo,获取本地的数据:

    [html]  view plain  copy
    1. <script>  
    2.     window.onload = function() {  
    3.        var oDiv = document.getElementById('div');  
    4.      window.onstorage = function(ev){  
    5.           var json = JSON.parse(localStorage[ev.key]);  
    6.                        
    7.          oDiv.style.left = json.left + "px";  
    8.           oDiv.style.top = json.top + "px";  
    9.       }  
    10.    }  
    11. </script>  

       通过onstorage这个方法实现两个页面之间的通信,获取到本地储存的数据,转成数字实现两个页面的同步。

    展开全文
  • 利用thinkPHP框架如何实现两个页面之间的链接跳转呢,步骤如下: 第一步:我创建了一个Application 模块,在Application 下的Home 下Cntroller中有默认的IndexController.class.php文件, 它对应的模板文件位于View...

    利用thinkPHP框架如何实现两个页面之间的链接跳转呢,步骤如下:

    第一步:我创建了一个Application 模块,在Application 下的Home 下Cntroller中有默认的IndexController.class.php文件, 它对应的模板文件位于View下的Index文件夹里的index.html;如果没有Index文件夹,那么自己新建一个Index文件夹,并且在Index文件夹中创建一个index.html文件;

    第二步:在view文件夹下再创建一个Hello文件夹,Hello文件夹中再创建一个hello.html文件;

    第三步:现在我想通过index.html中的一个链接跳转到hello.html

    第四步:

    <a href="__APP__/Hello/hello">点我跳转到hello..html页面</a>

    即可实现跳转;




    展开全文
  • 通过JS实现两个页面之间的通信

    千次阅读 2017-07-27 11:06:08
    今天要给大家说的是两个不同页面之间的通信,通过一个拖拽demo来模拟; 首先,写好基础的拖拽代码: window.onload = function() { var oDiv = document.getElementById('div'); oDiv.onmousedown = function...
  • 通过bootstrapTable的append实现 将左表的数据添加到右表中原地址:http://blog.csdn.net/hack8/article/details/49003487Js代码$tableLeft = $('#table_left').bootstrapTable("refresh", { url: '/Containers/...
  • 图1-Screen1 图2-Screen2 ...那么,在AppInventor中如何实现页面的跳转呢?...如图所示,你需要设计两个屏幕,Screen1和Screen2,在Screen1中为Screen1中的“开始”按钮进行逻辑设计,如图所示:
  • 当user1向服务器发送一次数据,数据能够及时地传到user2的页面
  • 在一页面的Console中输入以下代码 window.onload=(function(){ window.addEventListener('storage', (e) => console.log(e)) // 或者 window.onstorage = (e) => {console.log(e)} })() 然...
  • 使用HTML实现网页之间的跳转

    千次阅读 2014-02-20 18:47:36
    使用HTML实现网页之间的跳转大家好,很高兴我们有见面了,我是孤狼,本次我给大家带来的是使用HTML语言实现网页之间的跳转!使用场景:比如说你有一博客地址很长,你自己看不好访问,同时由于网址太长,其他人也不...
  • 实现两个div的连线功能

    万次阅读 2019-04-04 14:07:28
    1、得到两个div的某个连接点坐标; 2、判断是否在一条线上,分三种情况求出连线长度: (1)x轴坐标相同;连线长度为x轴坐标差 (2)y轴坐标相同;连线长度为y轴坐标差 (3)坐标都不同,利用勾股定理算出两个...
  • 两个HTML页面之间如何传值

    万次阅读 多人点赞 2018-11-08 17:58:31
    因最近尝试实现客户端与服务端分离,服务端只提供接口,客户端用html+js实现,分成两个独立的项目部署,因项目是个人项目,客户端展示不考虑使用像Angular、Vue、Native这种前端框架实现,于是全部使用静态页面实现...
  • js实现两个div交换位置

    万次阅读 2012-09-17 16:18:27
    同事问了一个问题,就是关于两个层交换位置的问题,其实实现起来很简单,我在这里简单的列举两种方法: 方法一:这里只是用的纯js来实现,我直接贴代码,其中前面是判断是否兼容fixfox function moveDiv(id_1,id_2...
  • JSP+JavaBean实现任意两个整数和

    千次阅读 2018-10-16 12:59:46
    【问题】设计 Web 程序,计算任意两个整数的和,并在网页上显示结果。要求在 JavaBean 中实现数据的求和功能。 【分析】需要两个页面 input.jsp 和 show.jsp ,以及Add.java 【实现】 (1)首先设计实现数据求和...
  • Jquery在两个HTML页面之间传递参数

    千次阅读 2015-06-20 21:59:29
    待跳转页面JS: function openreverspage() {  var row = $("#dg").datagrid('getSelected');  alert(row.plane_type); ... window.location.href = "addorder.jsp?plane_type=" + escape
  • 问题:页面之间的跳转,通常带有值...但是如果我么要实现两个页面之间传值怎么实现呢?值的传递: 将值name从A.html传给controller,让后读取这个值,增加到model里,然后,B.html从model中读取处理A. html 如何将n
  • 用JS实现计算之间的距离

    万次阅读 2018-09-23 18:58:07
    虽然题目很简单,但还是感觉自己敲的代码不多,对于JS方法的使用及规则还是不够熟练,收获还是很多的,至少认识到了,自己编码速度还是太慢,思路,逻辑还是不够清楚。 &...JS点间距&l..
  • 两个页面之间通过js进行传值

    万次阅读 2016-11-15 17:19:28
    第一个页面中有两个图片,当点击的时候能在第二个页面中获得它的属性值()通过js进行传值:第一个页面:[html] 第一个页面中有两个图片,当点击的时候能在第二个页面中获得它的属性值()通过js进行传值...
  • 现有两个不同Web工程项目,... 如何整合实现:通过一个登录页面,登录后可以操作两个web系统的功能菜单。(应该需要将用户整合到一个数据库表、部门也需要合并到一个库表,菜单是否要合并?) 不需要单加验证系统。
  • 这篇文章会通过简单的步骤及最简单的例子来介绍如何使用QWebChannel实现网页端跟本地应用之间的通讯,也就是两者之间的相互操作,这里不会介绍基础理论及这种通讯是怎么实现的,这篇文章的核心以最快的速度告诉你,...
  • ASP.NET——实现两个下拉框动态联动

    万次阅读 热门讨论 2014-08-11 16:10:22
    这样的动态联动,一般由多个下拉框组成一组菜单,比如上面用到的两个下拉框。下拉菜单之间有联动的关系。当上级的选中项发生改变时,下级会根据上级中的选中项显示相应的内容。 用了动态联动之后,当面对庞大的数据...
  • 方法一: //test input function cal(){ document.getElementById("sum").value=(parseInt(document.getElementById("num1").value)+parseInt(document.getElementById("num2").value));...
  • 如何实现两个页面的跳转

    千次阅读 2016-07-20 19:06:48
    _addEvent:function(){ var btn; btn=this._getWidgetByName(this._startGav,"Button_7");//获取按钮的点击实事件... btn.addTouchEventListener(this._inputHandler.bind(this),this._startGav); }, _inputHandler:
  • 这里我们通过一个实例来阐述具体的做法,首先我们在一个页面有两个要处理的DIV页面,第一个页面的div中id=”basic”,第二个页面的div中id=”high”。(我们要实现的功能是,打击 基础入门,与 高级技能 可以切换...
  • 但是在软件工程领域的研究中,我们通常会比较关心某个软件在两个版本之前是怎样演化的,这时候简单操作SHA1值是得不到我们想要的结果的。所以要实现这个需求还稍微有点麻烦: 我们知道,Git中可以通过
  • 两个页面之间js的相互调用

    千次阅读 2016-01-20 10:48:34
    页面中需要另一页面的数据(选择带回),实现----> 页面调用 jsFunctionNameForSelectDialog=updateNewDetailAmountFromDetailEditDialog&payee.id=${contract.payee.id}&department.id=${one.id}" ...
  • 前言: 因最近移动端开发过程中遇到一运营提出的所谓技术难点需求,对于原生APP来说轻而易举,毕竟自己的APP用户操作指哪打哪,但是H5该怎么做?H5就实现不了么?对于一爱研究攻克这些前端棘手问题的我来说,我...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 270,817
精华内容 108,326
关键字:

怎样实现两个网页之间的