在 bootstrap 模态的 iframe 内空白 html 打开表单

Question

我在 bootstrap 模式内的 iframe 中显示了一个两步表单。当用户提交表单时，它被重定向到第二步。没什么不正常的。

问题是：有时，在用户第一步提交表单后，iframe 会变得完全空白（参见下面的视频）。

此问题发生的频率非常随机。有时我尝试 10/20 次，一切正常。有时我会尝试 3 次，每次尝试都会在第二步中生成一个空白的 iframe。
如果我执行任何在浏览器中绘制内容的操作 canvas 或强制 canvas 重绘，iframe 立即可见（例如：调整大小 window 或检查 iframe html 使用 chrome 开发者工具）。
即使 iframe 是空白的，输入元素仍然可以交互。
此问题发生在 Google Chrome。
例如，在下面的视频中，问题发生在我第三次执行第二步时，只有在我单击“Select 页面中的一个元素...”按钮后，iframe 才能正确显示来自chrome 开发者工具。

表单保持可交互但不可见

我尝试了以下方法来“强制”重绘 iframe，但没有成功：

调用window.dispatchEvent(新事件('resize'));在 iframe 加载后。
加载 iframe 后向 iframe contents() 添加一些文本。
加载 iframe 后更改 iframe z-index。
加载 iframe 后更改 iframe scrollTop。
加载 iframe 后更改 iframe 高度。

有什么建议或解决方法吗？

编辑 1

我发现直接在iframe/modal中打开第二步表单时也会出现问题。换句话说，问题与步骤1到2的表单提交无关。

问题似乎与打开的页面中存在脚本有关。在我的例子中，表单有一些小部件，比如 jquery 自动完成。我添加到表单（更复杂的表单）的小部件越多，问题发生的频率就越高。

Answer 1

我能够解决在 iframe 加载事件中调用以下方法的问题：

function forceRedraw(element){

    if (!element) { return; }

    var n = document.createTextNode(' ');
    var disp = element.style.display;  // don't worry about previous display style

    element.appendChild(n);
    element.style.display = 'none';

    setTimeout(function(){
        element.style.display = disp;
        n.parentNode.removeChild(n);
    },20); // you can play with this timeout to make it as short as possible
}

监听事件及调用方法：

$iframe.on('load', function() {          
        if ($iframe.attr('src') != 'about:blank') {
            setTimeout(function(){             
                forceRedraw($iframe[0]);
            }, 100);
        }
    });

在 bootstrap 模态的 iframe 内空白 html 打开表单

Blank html opening form inside iframe in bootstrap modal

html

iframe

google-chrome

bootstrap-modal