Question

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

我目前在假期页面上有两个标签（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>

Answer 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>

在onclick选项卡中重新加载iFrame

1 个答案: