javascript 调用其他页面的js函数或变量的脚本

要在JavaScript中调用其他页面的函数或变量,有以下两种方法:

1. 使用window.opener对象

当在一个页面中用window.open打开另一个页面时,这个被打开的页面就可以使用window.opener来访问打开它的页面。所以,我们可以利用这个特性来调用父页面的函数或变量。

父页面示例代码:

<!DOCTYPE html>
<html>
<head>
    <title>父页面</title>
</head>
<body>
    <button onclick="openNewPage()">打开子页面</button>
    <script>
        var message = "Hello World!";

        function showMessage() {
            alert(message);
        }

        function openNewPage() {
            window.open("child.html");
        }
    </script>
</body>
</html>

子页面示例代码:

<!DOCTYPE html>
<html>
<head>
    <title>子页面</title>
</head>
<body>
    <button onclick="window.opener.showMessage()">调用父页面函数</button>
    <button onclick="alert(window.opener.message)">调用父页面变量</button>
</body>
</html>

在子页面中,我们可以直接使用window.opener来访问父页面的函数和变量。示例代码中,在子页面中点击调用父页面函数按钮时,会将执行showMessage函数,弹出"Hello World!"的提示窗口;在点击调用父页面变量按钮时,会弹出"Hello World!"的提示窗口。

2. 使用LocalStorage

LocalStorage是浏览器提供的本地存储机制,我们可以利用LocalStorage来在两个页面间传递数据,包括函数和变量。

示例代码:

<!DOCTYPE html>
<html>
<head>
    <title>页面1</title>
    <script>
        var message = "Hello World!";

        function showMessage() {
            alert(message);
        }

        function saveMessage() {
            localStorage.setItem("message", message);
        }
    </script>
</head>
<body>
    <h1>页面1</h1>
    <button onclick="showMessage()">显示消息</button>
    <button onclick="saveMessage()">保存消息到LocalStorage</button>
    <a href="page2.html">进入页面2</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>页面2</title>
    <script>
        function showMessageFromLocalStorage() {
            alert(localStorage.getItem("message"));
        }
    </script>
</head>
<body onload="showMessageFromLocalStorage()">
    <h1>页面2</h1>
    <button onclick="window.location.href='page1.html'">返回页面1</button>
</body>
</html>

在页面1中,我们定义了一个变量message和一个函数showMessage,并且提供了一个保存消息到LocalStorage的函数saveMessage。在页面2中,我们定义了一个从LocalStorage中读取消息并弹出提示框的函数showMessageFromLocalStorage,因为这个函数要在页面加载时就执行,所以我们使用了onload事件。

当在页面1中点击保存消息按钮时,将会把变量message保存到LocalStorage中。当点击进入页面2按钮时,跳转到页面2,此时页面2的onload事件将会执行showMessageFromLocalStorage函数,从LocalStorage中读取message变量并弹出提示框。

以上两种方法都能够实现在JavaScript中调用其他页面的函数和变量,不同的是使用window.opener需要在父子页面中建立起关系,而使用LocalStorage则不受页面之间的关系限制。选择哪一种方法取决于具体场景的需求。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:javascript 调用其他页面的js函数或变量的脚本 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • javascript调试之DOM断点调试法使用技巧分享

    JavaScript调试之DOM断点调试法使用技巧分享 什么是DOM断点调试法 DOM断点调试法是一种网页调试方法,主要利用断点调试DOM元素的方式,来定位和解决JavaScript的问题。当页面效果不符合预期,或者页面崩溃、卡死等情况出现时,可以使用DOM断点调试法,找到问题所在,快速解决问题。 如何使用DOM断点调试法 步骤一:定位问题 首先,根据报错信…

    JavaScript 2023年6月10日
    00
  • JavaScript面向对象之七大基本原则实例详解

    JavaScript面向对象之七大基本原则实例详解 本文将向大家介绍面向对象编程的七大基本原则,并结合示例详细讲解这些原则的实现方法。 七大基本原则 单一职责原则(SRP) 单一职责原则是指一个类只应该有一个单一的功能。如果一个类承担了过多的职责,那么这个类就会变得不可控,难以维护,并且不易复用。 开放封闭原则(OCP) 开放封闭原则是指软件实体(类、模块、…

    JavaScript 2023年5月27日
    00
  • 让JavaScript拥有类似Lambda表达式编程能力的方法

    要让JavaScript拥有类似Lambda表达式编程能力,可以使用箭头函数(Arrow Function)来实现。 箭头函数是ES6中新增的语法,简单来说就是一种更加简洁的函数表达式。通过箭头函数,我们可以更加简单快速地编写函数,并且可以方便地使用函数式编程的一些特性。 下面是箭头函数的基本语法: (argument1, argument2, …) =…

    JavaScript 2023年5月28日
    00
  • 原生JavaScript实现刮刮乐

    关于“原生JavaScript实现刮刮乐”的攻略,我们可以按照以下步骤进行。 1. 准备工作 首先,我们需要在HTML文件中创建一个canvas元素,用于绘制刮去涂层后的图片。示例代码如下: <canvas id="scratch-card"></canvas> 接下来,我们需要准备两张图片。一张作为底部图片,一张…

    JavaScript 2023年6月10日
    00
  • jQuery Ajax 全局调用封装实例代码详解

    jQuery Ajax全局调用封装实例代码详解 在前端开发中,Ajax作为异步通信技术已经得到了广泛的应用。而通过jQuery库封装的Ajax则在开发中变得更加方便,让我们更加容易地处理数据请求和响应。本文将会详细介绍如何将jQuery的Ajax进行全局封装调用,以及如何实现Ajax的参数传递和数据处理。 前置知识 在进行本文讲解前,需要了解一些JavaSc…

    JavaScript 2023年6月11日
    00
  • js中时间格式化的几种方法

    讲解js中时间格式化的几种方法的攻略如下: 一、JavaScript中的时间表示 在JavaScript中,时间是用毫秒数来表示的。毫秒数是从1970年1月1日00:00:00 UTC开始计算的,也被称为1970年纪元。这个时间点被称为UNIX时间。UNIX时间是一个标准时间,所有的计算机系统都使用它来存储时间数据。 二、格式化时间的方法 在JavaScri…

    JavaScript 2023年5月27日
    00
  • js实现点击注册按钮开始读秒倒计时的小例子

    我来为您详细讲解实现“js实现点击注册按钮开始读秒倒计时的小例子”的完整攻略: 1. 准备工作 在开始实现 JavaScript 读秒倒计时功能前,我们需要准备一些基本的 HTML 结构和样式。 <!DOCTYPE html> <html lang="en"> <head> <meta chars…

    JavaScript 2023年6月11日
    00
  • 特殊日期提示功能的实现方法

    实现特殊日期提示功能的方法有很多种,但是在网站开发中,常用的方法主要有以下两种: 1. 使用 JavaScript 和 CSS 实现 步骤 在 HTML 中的 head 标签内引入 CSS 文件,用于设置日期提示框的样式; 在 body 标签内设置一个容器,用于存放日期提示框; 在 JavaScript 文件中实现以下逻辑: 获取当前日期,并根据需要将其转换…

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