javascript - 缺少 iframe ie8。相对定位不能解决问题

标签 javascript html css iframe internet-explorer-8

我正在使用他们的 PHP 和 Javascript 在网站上实现第 3 方 2fa 解决方案 (Duo Web)。
我可以在除 IE8 之外的所有浏览器上使用它。
通过初始登录屏幕后,2fa 登录页面加载,应该有 2fa 提示的 iframe 是空白的。

在阅读了此处的一些主题后,似乎 ie8 中 iframe 的正常解决方案是从嵌入页面中删除相对位置或将其提供给 iframe。
由于我无权访问该页面,因此我向框架添加了相对定位但没有任何效果。这是奇怪的部分,这只发生在您第一次访问 2fa 页面时。

重新加载页面会正确显示 iframe。该代码似乎也存在。 Duo 中有一个选项,可以在到达 2fa 页面时自动发送登录请求。启用后,请求会出现在 Duo 应用程序中,即使 iframe 为空,您也可以正确登录。

看起来代码有效,iframe 只是空白。同样,这只发生在第一次访问该页面时。之后 iframe 正确显示,直到浏览器关闭并重新打开。

由于这与工作相关,我无法显示确切的代码,但基本上是

<div id="iframe_container" style="text-align:center;width:100%;">
    <iframe id="duo_iframe" frameborder="0">Loading...</iframe>
    // this form passes data along when response comes back
    <form method="POST" id="duo_form"> 
        <input type="hidden"/>
        <input type="checkbox"/><label for="checkbox"><small>Remember this device</small></label>
    </form>
    // form to log user out and send them back to normal login page
    <form method="GET" action="url">
        <input type="hidden" />
        <input type="hidden" />
        <input type="submit" id="submit" value="Go Back">
    </form>
</div>

CSS如下

#duo_iframe
{
    width: 100%;
    min-width: 304px;
    max-width: 620px;
    height: 330px;
    background: transparent;
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

我在兼容模式下运行,但禁用它并不能解决问题。任何想法将不胜感激。

最佳答案

原来是竞争条件。当第一次加载嵌入页面时,它的初始化 Javascript 在元素可用之前被触发。刷新主页时,嵌入的内容会被缓存,因此它会在 js 触发之前加载。添加一个在几秒后调用 init 函数的超时解决了这个问题。

关于javascript - 缺少 iframe ie8。相对定位不能解决问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36048604/

相关文章:

javascript - Ember.js 每个助手不显示在条件中

javascript - CSS - 滚动到 id 但需要在 id 上方显示 h3 元素

javascript - 使用 jquery 插入后按钮操作不起作用

JavaScript 到 .csv 下载失败 : "Failed. No File"

jquery - 为什么我的选择器不起作用?文本()返回空

css - img.responsive 类在 wordpress 不工作

css - 如何使悬停在非相邻元素或子元素上工作

javascript - 将 then 附加到调用堆栈下多级 promise 的最佳解决方案是什么?

javascript - 等待加载时的 Javascript 事件

javascript - 无法读取 Node js中传入请求的数据