如何允许我的页面的一部分用作其他站点上的 iframe？

Question

How can I allow a part of my website be embedded on other site?如何允许我的网站的一部分嵌入其他网站？

HTML: HTML：

 <div id="AllowToBeEmbedded"> <b>Hello there!</b> </div> <div class="nonsense"> <b>Leave me out of this</b> </div>

Answer 1

You could check if the page is rendered within an iframe or not, and if this is the case hide/remove parts of the page you don't want to be displayed.您可以检查页面是否在 iframe 中呈现，如果是这种情况，请隐藏/删除您不想显示的页面部分。

Typical way to check if the page is in iframe mode is by comparing current window object to a window.top reference:检查页面是否处于 iframe 模式的典型方法是将当前window对象与window.top引用进行比较：

if (window.top !== window) {
  // we are within an iframe. hide parts of the page
  hideForIframe()
}

function hideForIframe() {
  const toHide = document.querySelectorAll('.nonsense')
  for (let i = 0; i < toHide.length; i++) {
    toHide[i].parentNode.removeChild(toHide[i])
    // or hide toHide.style.display = 'none'
  } 
}

To avoid possible content flashing until it's removed it also would make sense to hide it additionally with CSS.为了避免可能的内容在被删除之前闪烁，使用 CSS 额外隐藏它也是有意义的。 For this I would have this helper code in the very beginning of the page (in <head> ):为此，我将在页面的最开头（在<head> ）使用此帮助程序代码：

<script>
  const isInIframe = window.top !== window
  if (isInIframe) {
    document.documentElement.classList.add('iframe')
  }
</script>
<style>
  html.iframe .nonsense {
    display: none;
  }
</style>

如何允许我的页面的一部分用作其他站点上的 iframe？

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-02-18 11:02:29

如何允许我的页面的一部分用作其他站点上的 iframe？

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-02-18 11:02:29

解决方案1
1 已采纳 2018-02-18 11:02:29