jQuery mobile 在面板打开时重新加载 iFrame答案

【问题标题】：jQuery mobile reloads iFrame on panel openingjQuery mobile 在面板打开时重新加载 iFrame
【发布时间】：2013-12-19 09:03:36
【问题描述】：

我偶然发现了这个奇怪的问题，当我第一次打开面板时，jQuery 移动网站的内容区域中的 iframe 会重新加载。任何后续打开都不会重新加载 iFrame。

你可以在这个小提琴中看到它的作用：http://jsfiddle.net/jakobgt1/Z3mmn/7/（观察网络请求）。

<body>
<div data-role="page">
  <div id="nav-panel" data-role="panel">
    <a href="#my-header" data-rel="close">Close panel</a>
  </div>
  <div data-role="content">
      <a href= "#nav-panel" data-role="button">FooBar</a>
      <iframe src="http://gedefar.dk/"/>
  </div>
</div>
</body>

如果我将 iframe 替换为其他内容，则不会重新加载（例如图片 - http://jsfiddle.net/jakobgt1/GdKu2/1/）：

<img src="http://dummyimage.com/200x200/000/fff"/>

我正在使用 jQuery 1.10.1、jQuery Mobile 1.4.0 RC-1。

这是一个错误，还是我遗漏了什么？

更新答案：

通过将内容 div 包装在 ui-panel-wrapper div 中，iFrame 不会重新加载。（请参阅 URL 中只有 8 而不是 7 的原始小提琴，因为我不能发布两个以上的链接）

 <div class="ui-panel-wrapper">
   <div data-role="content">
       <a href= "#nav-panel" data-role="button">FooBar</a>
       <iframe src="http://gedefar.dk/"/>
   </div>
 </div>

雅各布

【问题讨论】：

第一次打开面板时，它会将 header、footer 和 content div 包裹在 ui-panel-wrapper 中，因此，content div 内容被重新加载。在以前的版本中，此步骤是在 panel 小部件自动启动/创建后执行的。另请注意，当data-display 是 push 或 reveal 时会发生这种情况。
感谢您的解释！并且确实使用 data-display="overlay" 确保页面不会重新加载。但是为什么图像没有重新加载？那是因为浏览器如何处理 dom 更改 wrt。到 iframe 和图像？
可能是因为图片的缓存与框架内的外部 URL 不同。
好的。无论如何感谢您的解释。我已经用解决方案更新了问题。
不客气 :) 将其添加为答案，不要用解决方案更新您的问题。

标签： javascript jquery jquery-mobile iframe

【解决方案1】：

答案：

感谢 Omar，我意识到通过将内容 div 包装在 ui-panel-wrapper div 中，iFrame 不会重新加载，因为这不是由 jQuery mobile 完成的。（请参阅 URL 中只有 8 而不是 7 的原始小提琴，因为我不能发布两个以上的链接）。

<div class="ui-panel-wrapper">
 <div data-role="content">
   <a href= "#nav-panel" data-role="button">FooBar</a>
   <iframe src="http://gedefar.dk/"/>
 </div>
</div>

雅各布

【讨论】：