HTML Google+ +1小部件如何打破其iframe

在本文中，我们将介绍Google+ +1小部件如何打破其iframe。Google+ +1小部件是一种可以在网站上显示Google+社交媒体上点赞的插件。它通常以一个iframe的方式嵌入到网页中。

阅读更多：HTML 教程

什么是iframe？

iframe是HTML中的一个标签，用于在网页中嵌入另一个网页或文档。通过使用iframe，可以将其他网站的内容嵌入到自己的网页中。这对于显示外部内容、广告或者一些交互插件非常有用。

Google+ +1小部件如何工作？

Google+ +1小部件使用iframe来显示Google+社交媒体上的点赞数量。通过将Google提供的嵌入代码插入到网页中，+1小部件就会以一个iframe的形式呈现。

例如，以下是一个简单的Google+ +1小部件代码：

<div class="g-plusone" data-annotation="none"></div>
<script type="text/javascript">
  (function() {
    var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
    po.src = "https://apis.google.com/js/plusone.js";
    var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

在网页中引用以上代码后，就会在页面上显示一个Google+ +1小部件。

Google+ +1小部件如何打破iframe？

尽管Google+ +1小部件通常以iframe的方式嵌入到网页中，但是有时候我们希望小部件可以脱离iframe进行自由定制和样式修改。下面介绍一种常用的方法。

使用JavaScript打破iframe

要使Google+ +1小部件可以打破iframe，我们可以使用JavaScript代码。通过在网页中插入以下代码，我们可以将小部件从iframe中解脱出来：

<script type="text/javascript">
  window.onload = function() {
    if (window.location !== window.parent.location) {
      // 在iframe中使用的样式
      document.body.classList.add("in-frame");

      // 在iframe外部使用的样式
      var newStyles = document.createElement("style");
      newStyles.innerHTML = ".in-frame .g-plusone { width: 100px; height: 20px; }";
      document.head.appendChild(newStyles);
    }
  };
</script>

以上代码首先检查网页是否处于iframe中。如果是的话，它会给<body>标签添加一个名为in-frame的类。这样，我们就可以通过CSS选择器来为在iframe中和在iframe外部的小部件设置不同的样式。

例如，我们可以对在iframe内部和外部显示的小部件设置不同的宽度和高度。以上代码中的CSS样式会将在iframe内部的小部件设置为100px宽度和20px高度。

通过使用如上的JavaScript和CSS代码，我们可以使Google+ +1小部件在嵌入iframe的网页中脱离出来，并对其进行自定义样式的设置。