iframe中的jquery mobile asp新页面

Posted

技术标签:

【中文标题】iframe中的jquery mobile asp新页面【英文标题】:jquery mobile asp new page in iframe 【发布时间】:2014-01-09 16:47:41 【问题描述】:

嗯,我已经解决了大部分问题。但是还有一个小问题。 <iframe src="" 似乎不正常,它不会在我的data-popupurl="product.asp?itemid=[catalogid] 中获取网址。

有人知道为什么吗?

<script>
$( document ).on( "pageinit", "#page1", function() 

    $(".popupInfoLink").on("click", function()
        var url = $(this).data("popupurl");
        $( "#popupInfo iframe" ).attr("src", url);
    );

);
</script>


<a class="popupInfoLink" href="#popupInfo" data-rel="popup" data-position-to="window" data-popupurl="product.asp?itemid=[catalogid]"><img src= "/thumbnail.asp?file=[THUMBNAIL]&maxx=200&maxy=0"    border="0" /></a>

<div data-role="popup" id="popupInfo" data-overlay-theme="a" data-theme="d" data-tolerance="15,15" class="ui-content">
    <iframe src=""  ></iframe>
</div>   

你可以在这里看到我的问题: https://www.kitchenova.com/mobile

只需运行搜索让我们说“cookie”,然后点击产品。在应该加载product.asp?itemid=[catalogid] 的位置出现一个空白弹出窗口。

【问题讨论】:

... 您不能使用弹出窗口来显示页面,但您可以使用对话框。 啊,谢谢,我现在研究一下,你太棒了! @奥马尔 【参考方案1】:

您可以将 jQM 弹出窗口小部件与 iFrame 一起使用。

这是一个DEMO

img 周围的链接现在链接到弹出窗口 ID。我添加了一个名为 data-popupurl 的自定义数据属性,其中包含 iFrame 的 url,并为单击处理程序添加了一个类,因为您可能在页面上有多个缩略图(注意:数据属性可以只保存目录 ID,或者您可以使用另一种方式获取网址):

<a class="popupInfoLink" href="#popupInfo" data-rel="popup" data-position-to="window" data-popupurl="http://www.houzz.com/photos/6147609/T-Fal-I-Hoffmann-Stock-Pot-8-Qt--contemporary-cookware-and-bakeware-"><img src= "http://st.houzz.com/simgs/a1419d6702561831_3-4003/contemporary-cookware-and-bakeware.jpg"    border="0" /></a>

<div data-role="popup" id="popupInfo" data-overlay-theme="a" data-theme="d" data-tolerance="15,15" class="ui-content">
    <iframe src=""  ></iframe>
</div>   

脚本通过读取弹出窗口的 url 然后将 iFrame src 设置为该 url 来简单地响应对链接的单击。在您的情况下,网址将是 product.asp?itemid=[catalogid]

$( document ).on( "pageinit", "#page1", function()     
    $(".popupInfoLink").on("click", function()
        var url = $(this).data("popupurl");
        $( "#popupInfo iframe" ).attr("src", url);
    );    
);

【讨论】:

其实有个小问题。 iframe src="" 没有获取 java 脚本“var url”。弹出窗口是空白的。我尝试将“product.asp?itemid=[catalogid]”添加到 iframe src,但这只会使第一个缩略图起作用,其余的缩略图只是打开了第一个链接。 @Mr.Vegas 在打开弹窗后重新加载iframe. var iframe = $("#popupInfo").find("iframe").clone(); $("#popupInfo").find("iframe").replaceWith(iframe).attr("src", url);` 类似这样的东西。 @Mr.Vegas 这是一个更新:jsfiddle.net/ezanker/afBuT/1 添加了 data-history="false" 和第二项以显示单独的 url。当弹出窗口关闭时,我还将 url 设置为空。如示例中那样,对于每个 A,输入 data-popupurl="product.asp?itemid=[catalogid]" 代码将正确设置 iframe。 其实它比我刚刚切换到$( document ).load更简单。只需要让脚本等到页面加载,但它似乎有点慢。我也不明白你的解释。 iframe 打开后如何重新加载?我想知道。 每次设置 src ( $( "#popupInfo iframe" ).attr("src", url); ) 时都会重新加载 iframe。【参考方案2】:

看看锚 (a) 标签的目标属性。 Here is the W3 Schools documentation.

<a href="product.asp?itemid=[catalogid]" target="_blank"><img src= "/thumbnail.asp?file=[THUMBNAIL]&maxx=200&maxy=0"    border="0"></a>

顺便说一句,我强烈建议你不要这样做。人们不喜欢那样,因为他们没有办法在他们做之前就知道这是行为。如果人们真的想在新窗口或标签中打开它,那么他们可以右键单击并执行此操作。

每个帖子保留一个问题是 Stack Overflow 政策。但最好的学习方式是参与并做教程。在你被严重卡住之前不要问问题。学习编程的一部分是学习自己解决问题。

【讨论】:

我被严重卡住了,我已经连续呆了大约 5 或 6 个小时。我访问了多个 jquery 论坛、此处和 youtube 教程,但无法使其正常工作。也许pop-up是用错了词,更像是加载了动态信息的灯箱,用户可以点击离开来摆脱它。【参考方案3】:

所以您不想弹出打开一个新窗口,而是希望一个对话框框出现在您的其他内容之上?

查看 Ajax Control Toolkit 中的 PopupControlExtender。我不知道它在 jQuery Mobile 环境中的效果如何,但值得一看。

示例代码。

<asp:Button runat="server" ID="Btn1" Text="Click Here For More Info" />
<ajaxToolkit:PopupControlExtender ID="PopEx" runat="server" TargetControlID="Btn1" PopupControlID="Panel1" Position="Bottom" />
<asp:Panel runat="server" id="Panel1">
Here is some more info!
</asp:Panel>

或者,既然您使用的是 jQuery Mobile,为什么不坚持他们已经为此提供的功能呢?看看jQuery Mobile panels 或jQuery Mobile popups。

【讨论】:

以上是关于iframe中的jquery mobile asp新页面的主要内容,如果未能解决你的问题,请参考以下文章

JQuery Mobile 仅缩放图像

jQuery mobile 停止在同一页面中使用 iFrame - Phonegap

jquery mobile 滑动面板 - 在包含 iframe 的区域上滑动事件

jQuery-mobile 和 ASP.NET 组合问题

jQuery-mobile 和 ASP.NET 组合问题

jquery mobile 和 asp:button 的问题