在 iframe 中加载时隐藏标题部分答案

【问题标题】：Hide a header section when it's loading within the Iframe在 iframe 中加载时隐藏标题部分
【发布时间】：2015-06-18 13:39:00
【问题描述】：

我有一个要求，它必须在另一个站点上加载我的 asp.net mvc/angularjs 应用程序。所以我必须为此使用iframe。

 <iframe width="500" height="500" frameborder="0" scrolling="yes" src="http://localhost:12534/home"></iframe>

我的 mvc 站点上的示例页面（索引页面）如下所示：

    @{
       Layout = "~/Views/Shared/_Layout.cshtml";
    }

  //other page components

_Layout.cshtml

<body xmlns:ng="http://angularjs.org" id="ng-app" ng-cloak ng-controller="MainController">

    <header ng-class="{'no-shadow': page == 'home'}">
        <div class="container">
                            <ul class="nav navbar-nav navbar-right">
                            <li><a href="/HowItWorks">How It Works</a></li>
                        </ul>
                    </div>
        </div>
    </header>
</body>

我的问题：您能否告诉我，当 _layout 页面仅在 iframe 中加载时，如何隐藏它的标题部分？提前致谢。

【问题讨论】：

window == window.top 应该可以解决问题。如果结果为真，则显示/渲染标题。 JS 对象window.top 引用顶部框架。如果这与当前窗口相同，则您的应用程序不在 iframe 中运行
@Michael 对不起，我没听明白。你能把它作为更多细节的答案吗？
@Michael 非常感谢。你能把它作为答案吗？然后我可以关闭这篇文章了。

标签： asp.net-mvc angularjs iframe

【解决方案1】：

在启动时检查顶部窗口是否与当前窗口相同。如果顶部窗口来自另一个域，您可以将条件包装在 try-catch 子句中，因为如果您尝试访问 window.top，它可能会引发权限异常。

angular.module('app', [])
  .run(function($window, $rootScope) {
    $rootScope.isStandalone = $window == $window.top;
  });

在 HTML 中根据该条件呈现标题

<div class="header ng-cloak" ng-if="isStandalone">[header]</div>

编辑：Plunker

【讨论】：