javascript父、子页面交互技巧总结

2023年6月10日下午3:47 • JavaScript

JavaScript父、子页面交互技巧总结

在Web开发中，经常需要在父页面和子页面之间进行信息交互，这时就需要用到JavaScript。本文将介绍JavaScript父、子页面交互的几种常见技巧。

通过iframe元素实现父、子页面交互

在父页面中，可以通过iframe元素引入子页面。父页面可以访问子页面中的元素和JavaScript函数，子页面也可以通过window.parent访问父页面的元素和JavaScript函数。

以下是一个示例：

父页面

<html>
<head>
  <title>父页面</title>
</head>
<body>
  <iframe id="myFrame" src="child.html"></iframe>
  <script>
    function sayHello() {
      alert('Hello from parent page');
    }
  </script>
</body>
</html>

子页面（child.html）

<html>
<head>
  <title>子页面</title>
</head>
<body>
  <button onclick="window.parent.sayHello()">Click me</button>
  <script>
    function sayHello() {
      alert('Hello from child page');
    }
  </script>
</body>
</html>

在本示例中，当点击子页面的按钮时，子页面会调用父页面中的sayHello函数，弹出“Hello from parent page”的弹窗。同样地，在父页面中调用子页面的函数也十分方便，只需要使用iframe元素的contentWindow属性即可。

通过window.open打开子窗口实现页面交互

除了使用iframe元素，还可以通过window.open打开一个子窗口。父页面可以访问子窗口的元素和JavaScript函数，子窗口也可以通过window.opener访问父页面的元素和JavaScript函数。

以下是一个示例：

父页面

<html>
<head>
  <title>父页面</title>
</head>
<body>
  <button onclick="openChildWindow()">打开子窗口</button>
  <script>
    function sayHello() {
      alert('Hello from parent page');
    }

    function openChildWindow() {
      var childWindow = window.open('child.html');
      childWindow.opener = window;
    }
  </script>
</body>
</html>

子页面（child.html）

<html>
<head>
  <title>子页面</title>
</head>
<body>
  <button onclick="window.opener.sayHello()">Click me</button>
  <script>
    function sayHello() {
      alert('Hello from child window');
    }
  </script>
</body>
</html>

在本示例中，当点击父页面的按钮时，父页面会打开子页面，在子页面中点击按钮时，子页面会调用父页面中的sayHello函数，弹出“Hello from parent page”的弹窗。

通过以上两个示例，我们可以看到，在Web开发中，JavaScript父、子页面交互是必不可少的一部分，掌握如何进行页面交互是十分重要的。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript父、子页面交互技巧总结 - Python技术站