← 返回首页

iframe 嵌入调试

粘贴交给宿主 A 的嵌入代码。B 通过 postMessage 回传高度后，A 只更新 .iframe-section 的 height（iframe 保持 100%）。

宿主嵌入代码粘贴交给宿主 A 的整段 HTML + script。推荐：section 用 height 占位，iframe 用 height:100%；收到 B 的高度后只改 section。

<div class="iframe-section" style="height: 640px;">
  <iframe
    style="width: 100%; height: 100%; border: none; border-radius: 10px; padding: 0px"
    id="venue-map-1665ec5a-9a28-470c-891f-c4999b98c777-wgbx-venue-map"
    sandbox="allow-same-origin allow-forms allow-scripts allow-popups allow-popups-to-escape-sandbox"
    src="https://release.pear.us/embed/wgbx/events/1665ec5a-9a28-470c-891f-c4999b98c777?urlAlias=venue-map&iframeId=venue-map-1665ec5a-9a28-470c-891f-c4999b98c777-wgbx-venue-map"
    title="Ticket Booking"
    loading="lazy"
    allow="fullscreen; payment"
  ></iframe>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    window.addEventListener("message", function (event) {
      if (
        event.origin === "https://release.pear.us" &&
        event.data &&
        typeof event.data === "object" &&
        event.data.height &&
        event.data.iframeId
      ) {
        const iframe = document.getElementById(event.data.iframeId);
        if (iframe) {
          const section = iframe.closest(".iframe-section");
          if (section) {
            section.style.height = event.data.height + "px";
          }
        }
      }
    });
  });
</script>

当前：id=venue-map-1665ec5a-9a28-470c-891f-c4999b98c777-wgbx-venue-map · origin=https://release.pear.us · placeholder height=640px

postMessage 日志

0 条

尚无消息。收到 B 的 height + iframeId 后，会更新 .iframe-section 高度（iframe 仍为 height:100%）。