JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)

在JS中跨页面调用变量和函数可以通过以下几种方法实现:

1. 使用cookie

可以在页面中设置一个cookie,把需要共享的变量值存储到cookie中。然后在另一个页面中读取这个cookie,就能够获得变量值。示例如下:

a.js

function setCookie(c_name,value,expiredays){
    var exdate=new Date();
    exdate.setDate(exdate.getDate()+expiredays);
    document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
setCookie('name', 'Tom', 1); 

b.js

function getCookie(c_name){
    if (document.cookie.length>0){
      var c_start=document.cookie.indexOf(c_name + "=");
      if (c_start!=-1){ 
        c_start=c_start + c_name.length+1 ; 
        var c_end=document.cookie.indexOf(";",c_start);
        if (c_end==-1) c_end=document.cookie.length;
        return unescape(document.cookie.substring(c_start,c_end));
      } 
    }
    return "";
}
var name = getCookie('name');
console.log(name); // Tom

2. 使用localStorage

可以在页面中使用localStorage将数据存储到浏览器的本地存储中,这样就可以在两个页面间传递数据。示例如下:

a.js

localStorage.setItem('name', 'Tom');

b.js

var name = localStorage.getItem('name');
console.log(name); // Tom

需要注意的是,localStorage只能在同一个域名下使用,所以如果不在同一个域名下,需要使用其他方法。

另外还可以使用iframe、postMessage、JSONP等方式来实现跨页面调用,具体实现需要根据具体需求来选择。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用) - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • 基于打包工具Webpack进行项目开发实例

    基于打包工具Webpack进行项目开发的完整攻略可以分为如下几个步骤: 创建项目并安装Webpack 配置基本的Webpack配置文件 配置Loader和Plugins 进行项目开发及打包 下面我将详细讲解每一个步骤的具体细节以及两个示例。 1. 创建项目并安装Webpack 首先,我们需要创建一个新的项目,并将Webpack安装在项目中。创建新项目的方法可…

    JavaScript 2023年6月11日
    00
  • JS中使用Array函数shift和pop创建可忽略参数的例子

    下面是JS中使用Array函数shift和pop创建可忽略参数的攻略。 前言 在JS中使用数组函数shift和pop时,我们经常会遇到需要忽略某些参数的情况。这时,我们可以使用类似es6中的解构赋值,通过逗号分隔符来创建可忽略参数。 shift函数示例 shift函数通过删除数组的第一个元素,返回该元素值。我们可以通过shift函数来模拟创建可忽略参数的方式…

    JavaScript 2023年5月27日
    00
  • JavaScript的concat方法实例代码(数组连接)

    JavaScript的concat方法实例代码(数组连接) JavaScript中的concat方法用于连接两个或多个数组,并返回一个新的数组。该方法不会改变原始数组,而是创建一个新的数组。 语法 array.concat(array1, array2, …, arrayX) 其中, array1, array2, …, arrayX 是要连接的数组…

    JavaScript 2023年5月27日
    00
  • js严格模式总结(分享)

    JS严格模式总结(分享) JS严格模式,也叫做严格模式,是ES5中定义的一种JS运行的模式。它可以让代码在更加安全的环境下运行,且更加严格地执行代码。本文将为您详细讲解JS严格模式的使用、注意事项以及相关示例。 使用严格模式的方法 使用严格模式只需要在JS代码的开头添加’use strict’;即可,例如: ‘use strict’; function fo…

    JavaScript 2023年6月10日
    00
  • Promise+async+Generator的实现原理

    下面是 Promise+async+Generator 的实现原理的完整攻略: Promise 的实现 Promise 内部维护了一个状态值,有三种状态:pending, fulfilled 和 rejected。 在 Promise 内部定义了 resolve 和 reject 两种方法,用于设置异步操作成功和失败后的返回结果。 Promise 内部还定义…

    JavaScript 2023年5月27日
    00
  • 分享JS表单验证源码(带错误提示及密码等级)

    分享JS表单验证源码是一项非常实用的技能,让我们一步步来学习如何完成它。 首先我们需要准备一个HTML表单。代码如下: <form action="#" method="POST"> <label>用户名:</label> <input type="text&quot…

    JavaScript 2023年6月10日
    00
  • Jquery响应回车键直接提交表单操作代码

    以下是关于Jquery响应回车键直接提交表单操作代码的完整攻略。 1. 实现方法 Jquery可以监听键盘事件,并且可以获取当前输入框的值,从而判断是否需要执行相应操作。 常用的键盘事件有keydown和keyup,分别代表按下和抬起键的时候触发。 代码实现如下: $(document).ready(function(){ //监听按键事件 $(‘input…

    JavaScript 2023年6月10日
    00
  • javascript 面向对象编程基础:封装

    面向对象编程 (Object-Oriented Programming,OOP) 是一种编程范式,它将数据和操作数据的方法封装起来,以对象的形式呈现出来,以此来实现代码重用。其中,封装就是OOP中的三大特性之一。 封装(Encapsulation),顾名思义就是封住某些操作,不让外界直接访问内部的数据,只允许一些公共的接口对数据进行访问和操作,从而达到保护数…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部