如何识别网页是加载到iframe中还是直接加载到浏览器窗口中?

JavaScript

猿蛋蛋凯

2020-03-12

我正在写一个基于iframe的Facebook应用程序。现在,我想使用相同的html页面来呈现普通网站以及facebook中的画布页面。我想知道是否可以确定页面是否已在iframe中加载或直接在浏览器中加载?

第942篇《如何识别网页是加载到iframe中还是直接加载到浏览器窗口中?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

11个回答
GreenA 2020.03.12

如果您想知道用户是否正在从Facebook页面选项卡或画布访问您的应用程序,请检查“签名请求”。如果您不了解,则可能是用户未从Facebook访问。为了确保确认signed_request字段结构和字段内容。

使用php-sdk,您可以像这样获得Signed Request:

$signed_request = $facebook->getSignedRequest();

您可以在此处阅读有关签名请求的更多信息:

https://developers.facebook.com/docs/reference/php/facebook-getSignedRequest/

和这里:

https://developers.facebook.com/docs/reference/login/signed-request/

老丝Eva 2020.03.12

这对我来说是最简单的解决方案。

    <p id="demofsdfsdfs"></p>

<script>

if(window.self !== window.top) {

//run this code if in an iframe
document.getElementById("demofsdfsdfs").innerHTML = "in frame";

}else{

//run code if not in an iframe
document.getElementById("demofsdfsdfs").innerHTML = "no frame";
}

</script>
达蒙武藏 2020.03.12

我正在使用这个:

var isIframe = (self.frameElement && (self.frameElement+"").indexOf("HTMLIFrameElement") > -1);
Mandy古一 2020.03.12

在每个页面中编写此JavaScript

if (self == top)
  { window.location = "Home.aspx"; }

然后它将自动重定向到主页。

JinJinLEY 2020.03.12
if (window.frames.length != parent.frames.length) { page loaded in iframe }

但前提是您的网页和在iframe中加载您的网页的iframe数量不同。在您的网页中没有iframe可以保证此代码的结果100%

Pro神无樱 2020.03.12

我实际上曾经检查过window.parent并为我工作,但是最近window是一个循环对象,并且始终具有父键,iframe或没有iframe。

正如评论所示,很难与window.parent进行比较。如果iframe与父网页完全相同,则不确定是否可以使用。

window === window.parent;
猴子樱 2020.03.12

我不确定该示例如何适用于较早的Web浏览器,但是我将其用于IE,Firefox和Chrome,而没有and问题:

var iFrameDetection = (window === window.parent) ? false : true;
小哥Eva 2020.03.12

由于您是在Facebook应用程序的上下文中询问,因此您可能要考虑在发出初始请求时在服务器上检测到此情况。如果从iframe调用,Facebook将传递包括fb_sig_user键的一堆查询字符串数据。

由于您可能仍然需要在应用程序中检查和使用此数据,因此可以使用它来确定要呈现的适当上下文。

西里神乐 2020.03.12

浏览器可能window.top由于相同的原始策略阻止访问IE错误也会发生。这是工作代码:

function inIframe () {
    try {
        return window.self !== window.top;
    } catch (e) {
        return true;
    }
}

topself都是window对象(以及parent),因此您正在查看窗口是否是顶部窗口。

梅神乐 2020.03.12

至今最佳的旧版浏览器框架中断脚本

其他解决方案对我不起作用。这适用于所有浏览器:

防止点击劫持的一种方法是在每个不应包含框架的页面中包含一个“ frame-breaker”脚本。以下方法即使在不支持X-Frame-Options-Header的旧版浏览器中也可以阻止网页的框架。

在文档HEAD元素中,添加以下内容:

<style id="antiClickjack">body{display:none !important;}</style>

首先将一个ID应用于样式元素本身:

<script type="text/javascript">
   if (self === top) {
       var antiClickjack = document.getElementById("antiClickjack");
       antiClickjack.parentNode.removeChild(antiClickjack);
   } else {
       top.location = self.location;
   }
</script>

这样,所有内容都可以在文档HEAD中,并且您的API仅需要一个方法/标记库。

参考:https//www.codemagi.com/blog/post/194

Jim猴子Eva 2020.03.12

使用此javascript函数作为有关如何完成此操作的示例。

function isNoIframeOrIframeInMyHost() {
// Validation: it must be loaded as the top page, or if it is loaded in an iframe 
// then it must be embedded in my own domain.
// Info: IF top.location.href is not accessible THEN it is embedded in an iframe 
// and the domains are different.
var myresult = true;
try {
    var tophref = top.location.href;
    var tophostname = top.location.hostname.toString();
    var myhref = location.href;
    if (tophref === myhref) {
        myresult = true;
    } else if (tophostname !== "www.yourdomain.com") {
        myresult = false;
    }
} catch (error) { 
  // error is a permission error that top.location.href is not accessible 
  // (which means parent domain <> iframe domain)!
    myresult = false;
}
return myresult;
}

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android