在选项卡 onclick 中重新加载 iFrame答案

【问题标题】：Reload iFrame in tab onclick在选项卡 onclick 中重新加载 iFrame
【发布时间】：2014-08-04 01:38:43
【问题描述】：

我的客户坚持在他的假期预订网站上使用 Wufoo 表格。该网站是建立在 WordPress 之上的，因此我没有为每个预订表格创建单独的页面（就像他当前的网站 - 乱七八糟！）我想我会在标签或模式中显示每个假期的相关预订表格。

我目前在假期页面上有 2 个选项卡 (jQuery UI)，一个带有假期详细信息（“详细信息” - 默认情况下处于活动状态），另一个带有预订表格（“立即预订”，未激活）。问题是，预订表格下面有太多的空白。这是因为表单在页面加载时加载，而不是在单击“立即预订”选项卡时加载。如果我在 iFrame 加载之前刷新页面并立即点击“立即预订”选项卡，则它会完美加载，其下方没有空白，但如果我只是刷新页面然后在几次之后单击“立即预订”秒然后表格有空格。预订表单是从 Wufoo 嵌入的，因此 iFrame 使用 JavaScript 加载。在单击“立即预订”标签之前，有什么方法可以阻止 iFrame 加载？

这是来自 Wufoo 的嵌入代码：

    <script type="text/javascript">var z7s0z9;(function(d, t) {
    var s = d.createElement(t), options = {
    'userName':'USERNAME', 
    'formHash':'z7s0z9', 
    'autoResize':true,
    'height':'2592',
    'async':true,
    'header':'show', 
    'ssl':true};
    s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') +         'wufoo.com/scripts/embed/form.js';
    s.onload = s.onreadystatechange = function() {
    var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return;
    try { z7s0z9 = new WufooForm();z7s0z9.initialize(options);z7s0z9.display(); } catch         (e) {}};
    var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);
    })(document, 'script');</script>

【问题讨论】：

标签： javascript wordpress jquery-ui iframe wufoo

【解决方案1】：

您可以通过 ajax 而不是 iframe 加载选项卡，因为 iframe 将始终在页面加载时加载。

参考这个loading tab vi ajax very easy

<script>
  $(function() {
    $( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        });
      }
    });
  });
  </script>
</head>
<body>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Preloaded</a></li>
    <li><a href="ajax/content1.html">Tab 1</a></li>
    <li><a href="ajax/content2.html">Tab 2</a></li>
    <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
    <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
</div>

【讨论】：