Question

我有一个JSF页面在iFrame中显示另一个网站：

<iframe id="frame" name="frame" style="display:none; 
width: 100%; height: 700px" scrolling="yes" />

此网站需要我使用隐藏输入字段执行的授权和使用JavaScript提交的表单。登录后我转到另一个网址。

<form id="login" target="frame" method="post" action="LOGIN-URL">
   <input type="hidden" name="username" value="Test"/>
</form>

<script type="text/javascript">
   document.getElementById('login').submit();
   var iframe = document.getElementById('frame');
   iframe.onload = function() {
      if (iframe.src.indexOf(REDIRECT-URL) == -1) {
          iframe.src = REDIRECT-URL;
      }
   }                    
</script>

在加载过程中，我想显示一个加载图标（包含在div中），在REDIRECT-URL完成加载后，我想显示iFrame。因此，您可以看到iFrame最初未显示。完成页面加载后，我想调用一个函数为iFrame（以及加载div）设置另一个样式类。

function changeStyle() {
   document.getElementById("frame").className = "show";
   document.getElementById("loading").className = "hide";
}

<script>
   jQuery(window).load(function() {
      changeStyle();
   });
</script>

登录和导航到重定向网址工作正常，但使用Chrome和Safari（Firefox工作正常，没有尝试其他浏览器），在iFrame登录后直接调用“changeStyle”功能。所以iFrame会尽早显示出来。问题是重定向的URL需要相当长的时间来加载，因此用户看到登录着陆页太长并试图从这里开始。那么如何在重定向后调用（window）.load？

已经尝试过

document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);

和

if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function() {
            curronload();
            yourFunctionName();
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}

类似的问题：

Javascript that executes after page load

Show Iframe after loading content

call a function after complete page load

jQuery $（window）.load事件在页面上用iFrame过早调用

0 个答案: