Question

在鼠标悬停在当前页面上时，从另一个页面显示单个元素的最有效方法是什么？

澄清：说我在页面A上有一个元素A.元素B在页面B上。它们位于同一个域中，但位于不同的页面上。

如果我将鼠标悬停在元素A上，让我们说，3秒钟，会出现一个小方框，并且元素B中的信息位于所述方框中。

我已经拥有悬停状态的代码，可以在悬停＆＃39; d元素A旁边显示一个白框但是我无法弄清楚如何在此框中显示元素B.

具有单个元素的iframe正是我想要的执行方式，但我不确定是否可以做这样的事情。

Answer 1

您可以使用localStorage，storage活动，Promise，setTimeout

A.html

<!DOCTYPE html>
<html>
  <head>    
  </head>    
  <body>
    <h1 id="A" style="border:1px solid green;">A</h1>
    <script>
      localStorage.clear();
      var _resolve, _reject;
      var a = document.getElementById("A");
      window.open("B.html");
       function wait() {
        return new Promise(function(resolve, reject) {
          _resolve = resolve; _reject = reject;
          setTimeout(function() {
            resolve()
          }, 3000)
        })
      }
      a.onmouseover = function(e) {
        wait()
        .then(function() {
          localStorage.setItem("timeout", "complete");
        })
        .catch(function(err) {
          alert(err)
        })

        a.onmouseover = null;
      }
      a.onmouseleave = function(e) {
        if (localStorage.getItem("timeout") === null) {
          _reject("less than three seconds of hovering at #A element")
        } else {
          localStorage.clear();
          document.body.removeChild(document.querySelector("dialog"));
          a.onmouseleave = null;
        }
      }

      window.onstorage = function(e) {
        console.log(e);
        var dialog = document.createElement("dialog");
        dialog.open = true;
        dialog.innerHTML = e.newValue;
        document.body.appendChild(dialog);
        window.onstorage = null;
      }
    </script>
  </body>    
</html>

B.html

<!DOCTYPE html>
<html>   
  <head>
  </head>   
  <body>
    <h1 id="B">B</h1>
    <script>
      var b = document.getElementById("B");

      window.onstorage = function(event) {
        console.log(event);
          localStorage.setItem("message", b.innerHTML)
      }
    </script>
  </body>    
</html>

plnkr http://plnkr.co/edit/QeKzD2B4MtGEyCKNCTIO?p=preview

在悬停时显示来自不同页面的元素

1 个答案: