jQuery iframe移动ASP新页面

Question

好吧，我已经解决了大部分问题。 但是仍然有一个小问题。 <iframe src=""似乎没有表现，它不会获取我的data-popupurl="product.asp?itemid=[catalogid]的URL。

有人知道为什么吗？

<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一起使用。

这是一个演示

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来响应对链接的单击。 在您的情况下，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）标签的目标属性。 这是W3 Schools文档。

<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>

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

每个帖子只问一个问题是堆栈溢出策略。 但是最好的学习方法是跳进去做教程。 在被严重卡住之前，不要问任何问题。 学习编程的一部分是学习自行解决问题。

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面板或jQuery Mobile弹出窗口 。