我正在写一个基于iframe的facebook应用程序。现在我想使用相同的html页面来渲染正常的网站以及facebook内的画布页面。我想知道我是否可以确定页面是否已经在iframe内加载或直接在浏览器中加载?
当前回答
我以前经常检查窗户。父键对我有用，但最近window是一个循环对象，总是有父键，不管有没有iframe。
正如评论所言，很难与窗口相比。父母工作。不确定这是否会工作，如果iframe是完全相同的网页作为父母。
window === window.parent;
其他回答
目前最好的遗留浏览器断帧脚本
其他的解决方法对我都不起作用。这条适用于所有浏览器:
防止点击劫持的一种方法是在每个不应该被框起来的页面中包含一个“打破框架”脚本。下面的方法将防止网页被框架，即使在传统浏览器，不支持X-Frame-Options-Header。
在文档HEAD元素中，添加以下内容:
<style id="antiClickjack">body{display:none !important;}</style>
首先对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中只需要一个方法/taglib。
参考:https://www.codemagi.com/blog/post/194
在Firefox 6.0扩展(Addon-SDK 1.0)的内容脚本中，接受的答案对我来说不起作用:Firefox在每个:顶级窗口和所有iframe中执行内容脚本。
在内容脚本中，我得到以下结果:
(window !== window.top) : false
(window.self !== window.top) : true
这个输出的奇怪之处在于，无论代码是在iframe中运行还是在顶级窗口中运行，它总是相同的。
另一方面，谷歌Chrome似乎只在顶级窗口内执行我的内容脚本一次，所以上面不会工作。
在两种浏览器的内容脚本中，最终为我工作的是:
console.log(window.frames.length + ':' + parent.frames.length);
如果没有iframe，则打印0:0，在包含一个框架的顶级窗口中打印1:1，在文档的唯一iframe中打印0:1。
这允许我的扩展在两个浏览器中确定是否存在任何iframes，此外，在Firefox中，如果它是在iframes之一中运行。
下面是@magnoz的回答的代码实现。
constructor() {
let windowLen = window.frames.length;
let parentLen = parent.frames.length;
if (windowLen == 0 && parentLen >= 1) {
this.isInIframe = true
console.log('Is in Iframe!')
} else {
console.log('Is in main window!')
}
}
我不确定这个例子如何适用于旧的Web浏览器，但我使用这个IE, Firefox和Chrome没有问题:
var iFrameDetection = (window === window.parent) ? false : true;
如果你想知道用户是否通过facebook page tab或canvas访问你的应用，请检查Signed Request。如果你没有得到它，可能用户没有从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/
