我正在写一个基于iframe的facebook应用程序。现在我想使用相同的html页面来渲染正常的网站以及facebook内的画布页面。我想知道我是否可以确定页面是否已经在iframe内加载或直接在浏览器中加载?
浏览器会阻塞对窗口的访问。顶部由于同源政策。IE漏洞也会发生。下面是工作代码:
function inIframe () {
try {
return window.self !== window.top;
} catch (e) {
return true;
}
}
Top和self都是窗口对象(还有父窗口),所以你会看到你的窗口是否是顶部窗口。
“机器人”是对的,但我想补充一点。
在IE7/IE8中,当微软在浏览器中添加标签时,他们破坏了一件事,如果你不小心,就会对你的JS造成严重破坏。
想象一下这样的页面布局:
MainPage.html
IframedPage1.html (named "foo")
IframedPage2.html (named "bar")
IframedPage3.html (named "baz")
现在在框架“baz”你点击一个链接(没有目标,加载在“baz”框架),它工作得很好。
如果页面被加载,让我们称之为special.html,使用JS检查“它”是否有一个名为“bar”的父帧,它将返回true(预期)。
现在让我们假设special.html页面在加载时,检查父帧(是否存在和它的名称,如果它是“bar”,它会在bar帧中重新加载自己。如。
if(window.parent && window.parent.name == 'bar'){
window.parent.location = self.location;
}
到目前为止一切顺利。现在问题来了。
让我们说,不是像平常一样点击原始链接,并在“baz”框架中加载special.html页面,而是单击它或选择在新选项卡中打开它。
当新标签加载时(没有任何父帧!)IE将进入无休止的页面加载循环!因为IE在JavaScript中“复制”了框架结构,这样新的标签确实有一个父标签,并且父标签的名字是“bar”。
好消息是,检查:
if(self == top){
//this returns true!
}
在新选项卡中确实返回true,因此您可以测试这种奇怪的条件。
由于您是在facebook应用程序的上下文中请求,您可能想要考虑在初始请求发出时在服务器上检测这一点。如果从iframe调用,Facebook将传递一堆查询字符串数据,包括fb_sig_user键。
因为你可能需要在你的应用程序中检查和使用这些数据,所以使用它来确定要渲染的适当上下文。
使用这个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;
}
在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之一中运行。
这是一段古老的代码,我用过几次:
if (parent.location.href == self.location.href) {
window.location.href = 'https://www.facebook.com/pagename?v=app_1357902468';
}
我用这个:
var isIframe = (self.frameElement && (self.frameElement+"").indexOf("HTMLIFrameElement") > -1);
if (window.frames.length != parent.frames.length) { page loaded in iframe }
但只有当iframe的数量在你的页面和页面谁加载你在iframe不同。使没有iframe在你的页面有100%的保证这段代码的结果
在每一页写这个javascript
if (self == top)
{ window.location = "Home.aspx"; }
然后它会自动重定向到主页。
如果你想知道用户是否通过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/
当在与父元素相同的iframe中,window. frameelement方法返回嵌入窗口的元素(例如iframe或object)。否则,如果在顶级上下文中浏览,或者如果父帧和子帧有不同的起源,它将求值为null。
window.frameElement
? 'embedded in iframe or object'
: 'not embedded or cross-origin'
这是一个在所有现代浏览器中都具有基本支持的HTML标准。
我以前经常检查窗户。父键对我有用,但最近window是一个循环对象,总是有父键,不管有没有iframe。
正如评论所言,很难与窗口相比。父母工作。不确定这是否会工作,如果iframe是完全相同的网页作为父母。
window === window.parent;
我不确定这个例子如何适用于旧的Web浏览器,但我使用这个IE, Firefox和Chrome没有问题:
var iFrameDetection = (window === window.parent) ? false : true;
目前最好的遗留浏览器断帧脚本
其他的解决方法对我都不起作用。这条适用于所有浏览器:
防止点击劫持的一种方法是在每个不应该被框起来的页面中包含一个“打破框架”脚本。下面的方法将防止网页被框架,即使在传统浏览器,不支持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
这对我来说是最简单的解决方案。
<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>
if ( window !== window.parent )
{
// The page is in an iframe
}
else
{
// The page is not in an iframe
}
function amiLoadedInIFrame() {
try {
// Introduce a new propery in window.top
window.top.dummyAttribute = true;
// If window.dummyAttribute is there.. then window and window.top are same intances
return !window.dummyAttribute;
} catch(e) {
// Exception will be raised when the top is in different domain
return true;
}
}
下面是@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!')
}
}
推荐文章
- 给一个数字加上st, nd, rd和th(序数)后缀
- 如何以编程方式触发引导模式?
- setTimeout带引号和不带括号的区别
- 在JS的Chrome CPU配置文件中,'self'和'total'之间的差异
- 用javascript检查输入字符串中是否包含数字
- 如何使用JavaScript分割逗号分隔字符串?
- 在Javascript中~~(“双波浪号”)做什么?
- 谷歌chrome扩展::console.log()从后台页面?
- 未捕获的SyntaxError:
- [].slice的解释。调用javascript?
- jQuery日期/时间选择器
- 我如何预填充一个jQuery Datepicker文本框与今天的日期?
- 数组的indexOf函数和findIndex函数的区别
- jQuery添加必要的输入字段
- Access-Control-Allow-Origin不允许Origin < Origin >