jquery 获取父页面输入框

原创

mob649e8159b30b 2024-08-16 03:56:47 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e8159b30b的原创作品，请联系作者获取转载授权，否则将追究法律责任

如何在 jQuery 中获取父页面输入框的值

在 Web 开发中，使用 jQuery 来获取父页面的输入框值是一项常见的任务。本篇文章将带您逐步了解如何实现这项功能。我们将通过一个简单的流程表格以及详细的代码和注释，来帮助您理解和掌握这一技能。

流程步骤

步骤	描述
步骤 1	在父页面中创建输入框
步骤 2	在 iframe 页面中获取父页面的输入框
步骤 3	显示获取到的输入框值

每一步的实现

步骤 1: 在父页面中创建输入框

首先，我们需要在父页面中创建一个输入框。下面是一个简单的 HTML 例子：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>父页面</title>
    <script src="
</head>
<body>
    父页面
    <input type="text" id="parentInput" placeholder="请输入内容">
    <iframe src="iframe.html" id="myIframe"></iframe>
</body>
</html>

步骤 2: 在 iframe 页面中获取父页面的输入框

接下来，我们将创建一个名为 iframe.html 的文件，以便我们能够抓取父页面的输入框值。下面的代码展示了如何实现该功能：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>iframe 页面</title>
    <script src="
    <script>
        $(document).ready(function() {
            // 从父页面获取输入框的值
            var parentInputValue = window.parent.$('#parentInput').val();
            console.log("从父页面获取的值: " + parentInputValue);
            alert("从父页面获取的值: " + parentInputValue); // 弹窗显示
        });
    </script>
</head>
<body>
    Iframe 页面
</body>
</html>

代码解释：

window.parent：代表父页面的 window 对象。
window.parent.$('#parentInput').val()：使用 jQuery 获取父页面中 id 为 parentInput 的输入框的值。
console.log 和 alert：用于输出和显示获取到的值。

步骤 3: 显示获取到的输入框值

在刚才的 iframe.html 中，我们已经通过 alert 弹窗的形式展示了从父页面获取的输入框值。

状态图

以下是状态图，帮助我们理解整个过程的状态变化：

stateDiagram
    [*] --> 父页面创建输入框
    父页面创建输入框 --> iframe 页面加载
    iframe 页面加载 --> 获取输入框值
    获取输入框值 --> [*]

序列图

使用序列图进一步说明父页面与 iframe 页面之间的交互：

sequenceDiagram
    participant Parent as 父页面
    participant Iframe as iframe 页面
    Parent->>Iframe: 加载
    Iframe->>Parent: 获取输入框值
    Parent-->>Iframe: 返回值
    Iframe->>Iframe: 显示值