检测页面是否有框架和 iframe 大小答案

【问题标题】：Detect if page is framed and the iframe size检测页面是否有框架和 iframe 大小
【发布时间】：2013-11-24 11:57:52
【问题描述】：

好的，问题来了。我已经托管 igoogle 小工具有一段时间了，最近删除了它们。许多网站仍然嵌入代码，并且无法让他们知道将其删除。我的计划是将所有小工具（页面）重定向到 404 并在其中插入一个 javascript 弹出窗口，让网站构建我的页面以了解更改 - 这对他们来说会很烦人。或者，将所有页面重定向到另一个包含能够执行所有这些操作的 javascript 代码的页面： - 检测页面是否有框架（据我所知，这是一个解决方案：if(top.location != self.location)） - 检测 iframe 大小（这是最难的部分） - 根据框架大小更改页面内容（一些 div 隐藏和其他 div 显示会这样做）

再次，为避免混淆：站点 A 在 iframe 中显示站点 B。 javascript 必须在站点 B 上，基本上 B 必须确定它是否被框架并采取上述操作 - 检测框架宽度/高度并显示不同的内容，例如 3-4 尺寸（例如 200px/200px、300px/300px ETC）。我不是很聪明，所以如果您有任何想法，请分享整个代码，而不仅仅是部分。这是一个开始，我的 JavaScript 知识到此为止：

<script language="JavaScript">
if(top.location != self.location){
// the magic code that gets the size of the frame that embeds this page and takes the above actions //
};
</script>

【问题讨论】：

我认为如果您的页面位于 iframe 内，那么通常用于“获取页面大小”等的 javascript 将根据 iframe 大小工作。
确认页面已装帧后，您是否尝试在 iframe 中使用 window.widht() 等。
frameElement 可能有用，除非 Same-origin policy 没有被违反。
谢谢大家，但是你能分享一下代码吗？我在这里迷路了。

标签： javascript jquery html iframe frame

【解决方案1】：

嗯...回答我自己的问题:) 我找到了一个 jQuery 解决方案：

<script language="JavaScript">
if(top.location != self.location){
$(document).ready(function() {
// when to show the 200px div
    if($(window).width() == 200) {
        $('#200').show();
    } else {
        $('#200').hide();
    }
    //when to show the 300px div
    if($(window).width() == 300) {
        $('#300').show();
    } else {
        $('#300').hide();
    }
});
};
</script>
<div id=200>200</div>
<div id=300>300</div>

【讨论】：