使用带有 Asp.Net 的文本框更改 href

Question

我有一个文本框和一个 Asp.Net 按钮。

我正在尝试使用此 prettybox Iframe 打开一个网络链接

现在我可以打开如果我提供如下所示的链接，在提供的链接中提到：

<a href="http://www.apple.com?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]">Apple.com</a>

但我不需要这样做，而是需要在文本框中提供网址，如果我点击按钮，我需要使用 Iframe 打开网站。

如下图所示，我可以通过单击按钮打开。

 <a id="various3" href="" rel="prettyPhoto[iframes]"><asp:Button ID="btnShowThumbnailImage" 
    runat="server" Text="Button" OnClick="btnShowThumbnailImage_Click" /></a>

如果我没有在 href 标记中提供 href 并在文本框中提供它，我将无法工作。

这是我到目前为止所做的：

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {

        $("#<%=btnShowThumbnailImage.ClientID %>").click(function () {
            $("a[rel^='prettyPhoto']").trigger('click');
        });

        $('#<%=txtWebsiteAddress.ClientID%>').change(function () {
            $('#various3').attr('href', $(this).val());
        });


        $("#<%=btnShowThumbnailImage.ClientID %>").click(function () {

            $("#various3").trigger('click');

        });
    });
</script>

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $("a[rel^='prettyPhoto']").prettyPhoto({
            width: '75%',
            height: '75%',
            animationSpeed: 'normal', /* fast/slow/normal */
            opacity: 0.80, /* Value between 0 and 1 */
            showTitle: true /* true/false */
        });
    });
</script>

这是我的按钮：

 <a id="various3" href="" rel="prettyPhoto[iframes]"><asp:Button ID="btnShowThumbnailImage" runat="server" Text="Button" OnClick="btnShowThumbnailImage_Click" /></a>

所以当我点击按钮时，它只会显示微调器，而不是打开任何东西，如下图所示。

Answer 1

您应该通过在锚元素上显式调用prettyPhoto 来初始化插件。

$(document).ready(function () {
    $("a[rel^='prettyPhoto[iframes]']").prettyPhoto();
}

顺便说一句，如果您不必在锚中指定 href，您应该指定 javascript:void(0); 以使其在所有浏览器中看起来像一个链接，因为如果没有 @987654324，像 Firefox 这样的浏览器不会将它们显示为链接除非在元素上应用了任何 css 以将其显示为链接，否则将指定 @。