Question

好吧，我发现了大部分问题。但仍有一个小问题。 <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" width="320" height="300" alt="pot" 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="" width="800px" height="800px"></iframe>
</div>

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

只需搜索“让我们说”“cookie”，然后点击产品即可。在product.asp?itemid=[catalogid]应加载的地方会出现一个空白弹出窗口。

Answer 1

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

这是 DEMO

img周围的链接现在链接到弹出窗口ID。我添加了一个名为data-popupurl的自定义数据属性，它具有iFrame的url，我为一个点击处理程序添加了一个类，因为你可能在页面上有多个缩略图（注意：data属性可以只保存目录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" width="320" height="300" alt="pot" 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="" width="400px" height="400px"></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);
    });    
});

Answer 2

查看anchor（a）标记的target属性。 Here is the W3 Schools documentation.

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

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

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

Answer 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新页面

3 个答案: