简体   繁体   中英

Show popup when mouse leave in another site

I have one whole html page which has script to show the pop up when mouse leave in browser window. When user want to close the tab on browser the popup will be show. I already create that page and it works properly in example.com . In this case I want to call that page in another site called exampletwo.com , so when user want to close the exampletwo.com the popup from my page in example.com will be triggered and show in exampletwo.com . Which I want is some script or iframe to show that popup page from my site example.com to exampletwo.com . This is my code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <title></title>

    <script type="text/javascript">
        var mouseX = 0;
        var mouseY = 0;
        var popupCounter = 0;

        document.addEventListener("mousemove", function(e) {
            mouseX = e.clientX;
            mouseY = e.clientY;
            //document.getElementById("coordinates").innerHTML = "<br />X: " + e.clientX + "px<br />Y: " + e.clientY + "px";
        });

        $(document).mouseleave(function () {
            if (mouseY < 100) {
                if (popupCounter < 1) {
                    var modal = document.getElementById("myModal");
                    modal.style.display = "block";
                }
                popupCounter ++;
            }
        });

        //var span = document.getElementById("close");


    </script>

    <script type="text/javascript">

        $( "#close" ).click(function() {
          var modal = document.getElementById("myModal");
                    modal.style.display = "none";
        });

    </script>

    <style type="text/css">
        /* The Modal (background) */
        .modal {
          display: none; /* Hidden by default */
          position: fixed; /* Stay in place */
          z-index: 1; /* Sit on top */
          left: 0;
          top: 0;
          width: 100%; /* Full width */
          height: 100%; /* Full height */
          overflow: auto; /* Enable scroll if needed */
          background-color: rgb(0,0,0); /* Fallback color */
          background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        /* Modal Content/Box */
        .modal-content {
          background-color: #fefefe;
          margin-right: 0%; /* 15% from the top and centered */
          padding: 0px;
          border: 1px solid #888;
          width: 30%; /* Could be more or less, depending on screen size */
        }

        /* The Close Button */
        #close {
          color: #aaa;
          float: right;
          font-size: 28px;
          font-weight: bold;
        }

        #close:hover,
        #close:focus {
          color: black;
          text-decoration: none;
          cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="myModal" class="modal">

      <!-- Modal content -->
      <div class="modal-content">
        <div id="close">&times;</div>
        <a href="<?=$image->link?>" target="_blank">
            <img src="<?=base_url()?>assets/images/<?=$image->images?>" style="width: 100%;">
        </a>
      </div>

    </div>
</body>
</html>

This is some example which I want, this script works properly to show the popup in another site but I don't understand how it works. I copied from some company which provide remarketing.:

    <script type="text/javascript">
        try{ var shopUrlCYB = 'yoursite.com'
            !function(){var t=function(t){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src=t;var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},e=Math.floor(5e4*Math.random());t("//d2rp1k1dldbai6.cloudfront.net/cybba_latest.min.js"),t("https://files1.cybba.solutions/"+shopUrlCYB+"/loader.min.js?v="+e),window._vteq=window._vteq||[],setTimeout(function(){window._vtsdk||t("https://storage.googleapis.com/cybcdn/"+shopUrlCYB+"/loader.js?v="+e)},1100),setTimeout(function(){"nestedVarDefined"in window&&!nestedVarDefined("_vtsdk.state.eventQueue")&&"_vtsdk"in window&&_vtsdk.init()},3e3)}();
        }catch(e){}
    </script>

You cannot observe site 2 events from site 1. Using an iframe would not fix the problem, since you cannot close an iframe as a normal window. Javascript is a browser language with restrictions, communications between different windows are not allowed, for the same reason why cookies from different domains are not allowed.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM