Question

我遇到了jQuery Mobile的一个奇怪问题，当点击iFrame中的链接并滚动时，父HTML文档中的持久标题会随着滚动而上下移动。有趣的是，这种行为只发生在jQuery mobile在iFrame中加载页面时。这里可以看到完整的示例：http://www.cs.au.dk/~gedefar/jqm/parent.html（记得在iPhone上加载它）。

对于代码并抱歉这个冗长的例子，但为了显示问题，我需要三个页面parent.html，其中包含iframe，以及两个加载的子页child_{1,2}.html iFrame（相互链接）：

<div data-role="page">
  <div id="header" class="header" data-role="header"
   data-position="fixed" data-theme="c">
    Foo Bar header
  </div> 

  <div data-role="content">
    <iframe src="child_1.html" />
  </div>
</div>

child_1.html：

<div data-role="page">
  <div data-role="content">
    <h1> Child page 1</h1>
    <a href="child_2.html">Go to child 2</a>
    <p>
      Normal text, where the header is perfectly positioned when touching
      here.
    </p>

    <p>
      No problems below, when this page loaded directly in the iFrame.  But loading
      child 2 using JQM we get the scolling issues.
    </p>

    <ul data-role="listview">
      <li>No link.</li>
      <li><a href="foobar">A link</a></li>
      <li>No link</li>
      <li><a href="foobar">A link</a></li>
    </ul>
  </div>
</div>

child_2.html（除了描述外，对child_1.html没有实质性的区别）：

<div data-role="page">
  <div data-role="content">
    <h1> Child page 2</h1>
    <a href="child_1.html">Go to child 1</a>
    <p>
      Normal text, where the header is perfectly positioned when touching
      here and moving up and down after the first touch.
    </p>

    <p>
     The problem is with list items below containing a link. For those the
     header is not fixed. For the other it is fixed.
    </p>

    <ul data-role="listview">
      <li>No link.</li>
      <li><a href="foobar">A link</a></li>
      <li>No link</li>
      <li><a href="foobar">A link</a></li>
    </ul>
  </div>
</div>

我觉得非常奇怪的是，如果滚动的第一次点击位于子页面上的链接上，则标题仅在滚动时移动。那么这里的任何想法如何进行？或者

更新

我已经在不同版本的iOS上测试了上述场景，它在7.0.3中完美运行，但是存在任何早于7.0.0的问题。我无法访问Android手机，因此我无法在那里进行测试。

jquery移动iframe滚动问题，当点击链接时

0 个答案: