Question

我使用“Jquery Mobiles popup”来展示广告，代码看起来非常像这样：

<div data-role="popup" id="adsPage" data-theme="b" class="ui-content">
  <img id="x" src="@routes.Assets.at("images/x.png")" onclick="closeAd()"/>
  <iframe id="adsFrame" src="/ads"></iframe>
</div>

问题是data-role = popup弄乱了我的整个页面。总是在加载另一个页面时，突然弹出一秒钟，同时也弄乱了整个页面布局。

到目前为止，我为这个问题尝试了几种解决方案，但没有一种方法可行。

显然我首先尝试使用data-role = page，但在这种情况下，iframe不会显示任何内容

我尝试将不透明度设置为0，并且在打开之前仅将其设置为1，这使得所有页面的一半都可以使用iframe内容的href进行点击。

我还尝试将div的显示设置为none，并且仅在弹出窗口打开之前设置为阻止。在这种情况下，我在打开广告时看不到任何内容。

我的最后一种方法是将div最初设置为data-role = page然后

if( adCount >= 20 ) {
    adCount = 0;
    $( "#adsFrame" ).attr("data-role", "popup");
    window.location.replace('#adsPage');
}

这也没有用，但我不确定代码是否错误。

所以我的问题是，我可以让最后的解决方案有效吗？或者有人可以向我解释为什么iframe在选择data-role = page时不会显示任何内容，以及我是否能以某种方式修复此问题？还是会想到任何其他类型的解决方案？

感谢提前输入任何内容。

Answer 1

我可以使用嵌入式对象而不是iframe来解决此问题。在jquery移动页面中可以毫无问题地使用嵌入对象，因此我的应用程序的布局不会再从弹出窗口中搞砸了。

我到这里的想法： Alternative to iFrames with HTML5

Jquery移动弹出数据 - 角色制作问题

1 个答案: