时间戳

首页 > 解决方案 > 根据 iFrame 内容自定义自己的页面？

javascript - 根据 iFrame 内容自定义自己的页面？

问题描述

我想在我的网站上加入一个 Spreadshirt 商店（附属公司）。
为此，我想将 Creator Tool 和购物车集成在一起，到目前为止也可以。它通过 Javascript 作为 IFrame 集成。
现在双方都有一个显示Spreadshirt标志的预加载器，但我会让我的访问者看到我的标志，直到工具被加载。由于我认为这不会在 iframe 中被操纵，所以我有另一个想法。
我想从页面视图中创建一个带有 z-index 的单独 DIV，直到页面加载到 iFrame 中。为此，我必须在 Creator Tool 的 iFrame 中使用 DIV 并在购物车中使用 DIV 监视器，一旦这些项目到位，禁用我的 DIV。
不幸的是，我只能使用 HTML 和 PHP。有人可以帮助我，例如使用 Javascript 或 jQuery 吗？

标签： javascriptjquery

解决方案

所以，我认为 window.parent.postMessage 是你的关键：https ://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

pageZ1.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Z1</title>
  <style>
    iframe{ width: 200px; height: 200px;}
    .noDisplay { display: none;}
  </style>
  </head>
<body>
  <h4>main page</h4>
  <div id="logo">LOGO</div>
  <iframe src="PageZ2.html" frameborder="0"></iframe>

  <script>
  window.onmessage=e=>{
    if (e.data==='load End') logo.className = 'noDisplay'
  }
  </script>
</body>
</html>

PageZ2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Z2</title>
</head>
<body>
  <h6>page Z 2</h6>
  <button id="btLoadEnd">end loading event of something</button>

  <script>
    btLoadEnd.onclick=_=>{
      window.parent.postMessage('load End',"*");
    }
  </script>
</body>
</html>

推荐阅读