jQuery mobile reloads iFrame on panel opening
Question
I have stumbled upon this weird problem, where an iframe in the content area of a jQuery mobile site is reloaded the first time I open a panel. Any subsequent opening does not reload the iFrame.
You can see it in action in this fiddle: http://jsfiddle.net/jakobgt1/Z3mmn/7/ (watch the network requests).
<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>
If I replace the iframe with anything else it is not reloaded (such as a picture - http://jsfiddle.net/jakobgt1/GdKu2/1/ ):
<img src="http://dummyimage.com/200x200/000/fff"/>
I'm using jQuery 1.10.1, jQuery Mobile 1.4.0 RC-1.
Is it a bug, or is there something I have missed?
Updated answer:
By wrapping the content div inside a ui-panel-wrapper div the iFrame is not reloaded. (See the original fiddle with just an 8 instead of a 7 in the URL, as I can't post more than two links)
<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>
Jakob
1 answers
solution1
0 ACCPTED 2013-12-19 20:47:09
Answer:
Thanks to Omar I realized that by wrapping the content div inside a ui-panel-wrapper div, the iFrame is not reloaded, as this is then not done by jQuery mobile. (See the original fiddle with just an 8 instead of a 7 in the URL, as I can't post more than two links).
<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>
Jakob
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.