使javascript跨两个标签工作

时间：2018-01-22 21:15:38

标签： javascript html

我想让我的javascript文件同时控制两个html5文件。 

<!DOCTYPE html>
<html>
<head>
  <title>tryAgainPage1</title>
  <meta charset="UTF-8">
</head>
<body>

  <div id="page1"></div>

  <script src="tryAgain.js"></script>
</body>
</html>

那是第一页。接下来是第二页。

<!DOCTYPE html>
<html>
<head>
  <title>tryAgainPage2</title>
  <meta charset="UTF-8">
</head>
<body>

  <div id="page2"></div>

  <script src="tryAgain.js"></script>
</body>
</html>

这是JavaScript：

newFunction();

function newFunction() {
    document.getElementById("page1").innerHTML = "page one says hello";
    document.getElementById("page2").innerHTML = "page two says goodbye";
}

第一页正在运行，第二页则没有。我一直在努力让页面互相交谈，没有成功。我不确定我是否理解如何在这种情况下实现广播频道（如果确实合适的话。）任何人都可以帮忙吗？

2 个答案:

答案 0 :(得分：6)

Web RTC

您可以使用Web RTC（网络实时通讯）。 一种技术，可让网络应用程序和网站捕获可选流式音频和/或视频媒体，以及在浏览器之间交换任意数据

postMessage

如果您正在寻找一种方法来制作两个页面或标签，您可以查看：
MDN Window.postMessage，并阅读此postMessage article
或MDN Broadcast_Channel_API

使用广播渠道API page1 - page2

工作原理：

  • pageX 订阅指定的广播频道对象
  • pageY 使用postMessage
    • 广播到相同的频道名称
  • pageX 收听"message"个事件并打印Event.data

反之亦然。

JavaScript Communicate between tabs using Broadcast Channel API

  

page1.html 

<h1>PAGE 1</h1>
<p><button data-broadcast="Page 1 talking!">BROADCAST</button></p>
Page 2 says: <div id="page2"></div>
<script src="comm.js"></script>
  

page2.html 

<h1>PAGE 2</h1>
<p><button data-broadcast="Page 2! 'Allo 'Allo!">BROADCAST</button></p>
Page 1 says: <div id="page1"></div>
<script src="comm.js"></script>
  

comm.js 

var bc = new BroadcastChannel('comm');

document.querySelector("[data-broadcast]").addEventListener("click", ev => {
  bc.postMessage( ev.target.dataset.broadcast );
});

const targetEl = document.querySelectorAll("#page1, #page2");

bc.addEventListener("message", ev => {
    [...targetEl].forEach( el => el.innerHTML = ev.data );
});

localStorage和storage事件

如果两个标签位于同一个域中，另一种简单但又很酷的方法是使用
Window.localStorageMDN及其Storage Event。

工作原理：

  • pageX 写入localstorage[pageX]
  • pageY window会触发storage事件
  • pageY 现在可以阅读localstorage[pageX]或更好（使其更简单（和 pageN 不可知））存储事件发送的Event.newValue

反之亦然。

对于初学者： DEMO：page1 - page2

JavaScript Communicate between tabs using localStorage

  

page1.html 

<h1>PAGE 1</h1>
<textarea data-sender="page1" placeholder="Write to page 2"></textarea>
Page 2 says:  <div id="page2"></div>
<script src="comm.js"></script>
  

page2.html 

<h1>PAGE 2</h1>
<textarea data-sender="page2" placeholder="Write to page 1"></textarea>
Page 1 says:  <div id="page1"></div>
<script src="comm.js"></script>
  

comm.js 

// RECEIVER
window.addEventListener("storage", ev => {
    document.getElementById( ev.key ).innerHTML = ev.newValue;
});

// SENDER
[...document.querySelectorAll("[data-sender]")].forEach( el =>
    el.addEventListener("input", ev => localStorage[el.dataset.sender] = el.value )
);

您的主要错误：

您的脚本无法在一个页面上运行...实际上在两者上，唯一的区别是第1页在实现#page2元素后无法找到 - 反之在在意识到没有"#page1"元素后（从第一顺序开始），其他页面立即中断 您应该始终使用if ( someElement ) { /*found!*/ }检查al元素是否存在。

是的，你不能以这种方式与沟通两个页面。他们只会共享/包含相同的JS文件。

答案 1 :(得分：0)

这两个页​​面都抛出错误，不同之处在于，在第一页上，错误在div更改之后才会发生。

这是一种可能的方法。

newFunction();

function newFunction() {
  var page = document.getElementById("page1") ? "1" : "2";
  var msg = page == "1" ? "page one says hello" : "page two says goodbye";
  document.getElementById("page"+page).innerHTML = msg;
}
相关问题
最新问题