javascript - On hover show element from different page

Question

Welcome To Ask or Share your Answers For Others

javascript - On hover show element from different page

posted Jan 31, 2022 in Technique[技术] by 深蓝 (71.8m points)

javascript - On hover show element from different page

What would be the most efficient way to display a single element from another page upon hovering on the current page?

To clarify: Say I have an Element A on a page A. Element B is on page B. They are on the same domain, but on different pages.

If I hover over Element A for, let's say, 3 seconds, a little box shows up and the information from Element B is in said box.

I already have code for a hover state to display a white box next to the hover'd Element A but am having trouble figuring out how I would go about displaying ONLY element B in this box.

An iframe with a single element would be exactly what I want in terms of execution but I'm not sure that it's possible to do such a thing.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2022-01-31T07:26:36+0000

You can use localStorage, storage event, 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

Categories

javascript - On hover show element from different page

javascript - On hover show element from different page

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags