我正在写一个基于iframe的facebook应用程序。现在我想使用相同的html页面来渲染正常的网站以及facebook内的画布页面。我想知道我是否可以确定页面是否已经在iframe内加载或直接在浏览器中加载?
当前回答
“机器人”是对的,但我想补充一点。
在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,因此您可以测试这种奇怪的条件。
其他回答
这对我来说是最简单的解决方案。
<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>
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;
}
}
浏览器会阻塞对窗口的访问。顶部由于同源政策。IE漏洞也会发生。下面是工作代码:
function inIframe () {
try {
return window.self !== window.top;
} catch (e) {
return true;
}
}
Top和self都是窗口对象(还有父窗口),所以你会看到你的窗口是否是顶部窗口。
下面是@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!')
}
}
这是一段古老的代码,我用过几次:
if (parent.location.href == self.location.href) {
window.location.href = 'https://www.facebook.com/pagename?v=app_1357902468';
}