Question

我哥哥的Bar Mitzvah已经过了几个月，我正在努力制作一个同步的介绍动画，设置为计时器。我的计划是两个显示屏幕显示不同的图像，DJ有一个屏幕，他/她可以设置一个计时器，一个功能调用被发送到不同的页面。

目前我要做的是测试（实时）点击“right.html”的身体并更改“left.html”上的正文颜色

这是我的javascript代码：

function changecolor(){
  document.getElementById('left').style.background = red;
}

左身体标签：

<body id="left">

右身标记：

<body onclick="changecolor()" id="right">

我做错了什么？

Answer 1

也许您可以使用localstorage

当其他选项卡更改localStorage时，将触发存储事件。这对于通信目的非常方便。 Web storage API

您可以获取用于设置元素样式的值：

function setStyles() {
  var currentColor = localStorage.getItem('bgcolor');
  var currentFont = localStorage.getItem('font');
  var currentImage = localStorage.getItem('image');

  document.getElementById('bgcolor').value = currentColor;
  document.getElementById('font').value = currentFont;
  document.getElementById('image').value = currentImage;

  htmlElem.style.backgroundColor = '#' + currentColor;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute('src', currentImage);
}

Answer 2

我已使用本地存储对此进行了测试，以便在同一浏览器中更改不同网页的颜色：

在需要在其他页面上设置更改颜色的页面上添加以下内容：

// Store background color
function changecolor(){
    localStorage.setItem("background", "red");
}

在需要获取颜色的网页：

// Loop every half a second, until the color is set
var intervalObj = setInterval(function(){ 
    // Check for background value
    var background = localStorage.getItem("background");

    // If background is set, use it and unset it
    if(background != "undefined" && background != null){
        // Dev notify
        console.log('Background setting to ' + background + '.');
        // Stop unnecessary interval
        clearInterval(intervalObj);

        // Set the background color
        document.getElementById('left').style.background = background;

        // Unset the variable
        localStorage.setItem("background", "undefined");
    }else{
        // Dev, notify if still didn't receive the color
        console.log("Waiting for page to be clicked...");
    }
}, 500);

注意：为不同的网页使用不同的变量。同一个变量不会在多个页面上工作。您可以为不同的页面使用不同的变量，例＆＃39; background_page1＆＃39;，＆＃39; background_page2＆＃39;等等让其他页面改变颜色。

从不同页面上的不同页面调用javascript函数

2 个答案: