iframe中的jquery mobile asp新页面

Posted 2023-05-09

【中文标题】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。