检测页面是否在 iframe 内并获取 iframe id答案

【问题标题】：Detect if page is inside of an iframe and get iframe id检测页面是否在 iframe 内并获取 iframe id
【发布时间】：2017-12-21 08:30:08
【问题描述】：

我们有一个游戏，我们的一个客户正试图将游戏加载到他们的 iframe 中。出于某种原因，他们需要锁定地址栏，并在 iFrame 中添加了 scrolling="no" 样式。

这会破坏我们的游戏，因为我们有一个他们永远无法摆脱的向上滚动覆盖。

我正在寻找一种方法来获取 iframe 并检查 iframe id，而无需对其域的跨域策略。这可能吗。我只需要 iframeID 或者检查样式并查看其是否可滚动。

由于浏览器跨域安全性，我觉得这是不可能的，但想通了，请在这里询问，看看是否有人有任何建议。

我正在尝试这个。

var ganFrame = document.getElementById( ganId );

它应该返回null

打电话

var ganFrame = window.top.getElementById( ganId );

但我得到了预期的跨域错误。有没有办法在没有错误的情况下检测到这个 iframe。我不需要访问它只是为了查看它是否存在。

如果 window.top != window.self 我可以检测到，但我们有其他客户需要我们在带有覆盖的 iframe 中。

注意

客户端不会改变其 iframe 的行为方式。

【问题讨论】：

等等。 iframe是100宽高，基本是逃不掉的？而你正在尝试用 JavaScript 来修复它？
不，它适合窗口。我们只是有一个覆盖层，需要用户在屏幕上向上滑动。因为他们的 iframe 不可滚动，所以此代码不起作用。在这种情况下，我们只想隐藏叠加层，但无法检测到它们的 iframe。
我意识到 crossDomain.xml 策略是可行的方法，但如果我们能避免这种情况，那就更好了。
必须有一种方法来检测它。 iframe 在代码中是否可见？它是浏览器还是应用程序或其他东西？

标签： javascript html iframe cross-domain

【解决方案1】：

客户端不会更改其 iframe 的行为方式。

您的客户愿意更改您游戏的网址吗？例如，您可以让他们在 url 中传递一个参数，例如： https://mygame.com/game.php?noScrollMode=true

您可以检查是否设置了 document.referrer，但用户可能会禁用引荐来源并破坏您的代码。

【讨论】：

虽然这行得通，但过去他们一直非常不愿意适应我们并做出改变。我们在游戏中提供促销和优惠，并为此使用了一个 url 参数，并且出于这个客户的唯一原因，我们不得不将其默认为关闭，因为他们拒绝改变他们的结局。

【解决方案2】：

我知道这是一个 hack，但它解决了我的问题。

所以因为我知道我正在寻找的框架的 ID，所以我可以使用此代码来获得所需的效果。

if(window.top != window.self){
    try {
        var ganFrame = window.top.getElementById("gameFrame");
    }
    catch ( e ) {
        isIOS7HelperDisabled = true;
    }
}

只是希望不会由此引发其他错误。可能需要检查错误类型。

【讨论】：

此解决方案不起作用。如果你调用 window.top 的任何方法都会给出一个跨域错误。