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中reduce()的5个基本用法示例

    当我们需要把一个数组变成一个单独的数值,或者我们需要使用一个数据结构去处理一个序列的值的时候,JavaScript中的reduce()方法就非常有用。本篇文章将详细讲解JavaScript中reduce()方法的5个基本用法示例,并提供两个具体的代码示例。 reduce()方法的语法 首先,我们需要了解下reduce()方法的语法: arr.reduce(c…

    JavaScript 2023年5月27日
    00
  • javascript 24小时弹出一次的代码(利用cookies)

    针对“javascript 24小时弹出一次的代码(利用cookies)”这个问题,我可以给你讲解一下完整的攻略。 什么是Cookie? 在开始讲解代码前,我们先简要介绍一下Cookie。Cookie是指浏览器保存在用户电脑上的一小段文本信息,一般用来记录用户在访问网站时的一些信息,例如用户名、购物车中的商品等。 Cookie主要有以下属性: 名称:一个唯一…

    JavaScript 2023年6月11日
    00
  • JavaScript基础知识之方法汇总结

    JavaScript基础知识之方法汇总 本文旨在总结 JavaScript 中常用的方法,包含了数据类型转换、运算符、条件语句、循环语句、函数等多个方面的内容,适用于初学者以及复习巩固。下面按照不同的分类分别介绍。 数据类型转换 JavaScript 中不同数据类型之间会发生类型转换,常见的有以下几种: 字符串转数字:使用 Number() 或 parseI…

    JavaScript 2023年5月17日
    00
  • JavaScript之Array常见的方法详解

    针对“JavaScript之Array常见的方法详解”的完整攻略,我将分为以下几个方面来进行讲解: Array的定义与基本操作 Array常见的方法及其用法解释与示例说明 1. Array的定义与基本操作 Array是JavaScript中的一种数据类型,它是用来存储一组数据的集合,并且每一个数据都有一个对应的索引。创建一个数组可以使用以下语法: var a…

    JavaScript 2023年5月27日
    00
  • js最全的数组的降维5种办法(小结)

    下面是详细讲解”js最全的数组的降维5种办法(小结)”的内容。 1. 理解数组的降维 数组的降维是指将多维数组转化为一维数组的过程,使得数组的数据变得更加简洁、易于处理。在JavaScript中,我们可以使用一些方法来实现数组的降维,本文将会介绍5种方法。 2. 五种降维方法 2.1 concat方法 在JavaScript中,我们可以使用concat方法将…

    JavaScript 2023年5月27日
    00
  • 通过循环优化 JavaScript 程序

    通过循环优化 JavaScript 程序是我们在开发过程中常用的一种优化手段,这种手段主要通过循环和处理数据来实现程序的优化。下面我们将为大家提供一份完整的攻略,让大家更好的了解如何通过循环优化 JavaScript 程序。 步骤 1:确定程序瓶颈 在进行循环优化之前,我们首先需要确定程序瓶颈,这样才能有的放矢的进行优化。通过使用 Chrome 开发者工具中…

    JavaScript 2023年5月27日
    00
  • jQuery轻量级表单模型验证插件

    下面是jQuery轻量级表单模型验证插件的完整攻略: 一、简介 jQuery轻量级表单模型验证插件是一款基于jQuery的表单验证插件,通过对表单输入内容的验证和检查,可以有效保证表单数据的有效性和安全性。 二、使用步骤 1. 引入插件 首先需要在HTML文档中引入jQuery和该插件的js文件: <script src="https://c…

    JavaScript 2023年6月10日
    00
  • 《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析

    下面是《JavaScript设计模式》学习笔记三的详细解析,包括单例模式的原理及其实现方法。 什么是单例模式? 在JavaScript中,单例模式是一个非常有用的设计模式。所谓单例模式,就是指一个类仅有一个实例并提供一个全局访问点。 使用单例模式可以避免创建过多的对象,降低系统内存的开销,并且可以让我们更方便地管理某些全局状态或全局资源。 单例模式的实现方法…

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