javascript - AddThis.com - 脚本管理器

标签 javascript asp.net updatepanel scriptmanager

我正在尝试在更新面板回发后注册一个 JS 文件。我试图让 AddThis.com 在回发后工作。如果我将 multiview.activeviewindex 设置为 1,它会起作用。但是,如果我从 View 1 转到 View 2,它就不起作用。

这是项目的服务器端代码。

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
'ScriptManager.RegisterStartupScript(Me, Me.GetType, "Test", "http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d4c6a5604aba88b", False)
ScriptManager.RegisterClientScriptBlock(Me, Me.GetType, "Test1", "http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d4c6a5604aba88b", True)

MultiView1.ActiveViewIndex = 0
End Sub

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
    MultiView1.ActiveViewIndex = 1
End Sub

这是 ASPX 代码:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication6._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d4c6a5604aba88b"></script>

</head>
<body>
    <form id="form1" runat="server">
    <div>

        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
                    <asp:View ID="View1" runat="server">
                        <asp:Button ID="Button1" runat="server" Text="Button" />
                    </asp:View>
                    <asp:View ID="View2" runat="server">
                    <!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>

<!-- AddThis Button END -->

                    </asp:View>
                </asp:MultiView>
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    </form>
</body>
</html>

我试过在脚本管理器上注册启动脚本。

有谁知道如何让它工作?

谢谢!

最佳答案

看起来 AddThis 只在窗口或文档加载期间起作用,因此这里需要一个小技巧。基本上这个想法是,您应该在第一个 View 中呈现 AddThis div,而不是将其抓取到 javascript 字段中,而不是显示在第二个 View 中提供的 div 中。

首先,您必须更改服务器端代码,因为您想要包含整个文件,而不是脚本 block 。您还应该仅在 PageLoad 方法期间执行此操作(我使用的是 c#,因此您必须重写下面的调用)。

ScriptManager.RegisterClientScriptInclude(this, GetType(), "Test", "http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d4c6a5604aba88b");

您也可以将它放在您的 html header 中(就像您所做的那样),并摆脱在这种情况下不必要的 ScriptManager 调用。 比你必须稍微改变你的多 View 的内容

<asp:View ID="View1" runat="server">
    <asp:Button ID="Button1" runat="server" Text="Button" />
    <div style="left:-2000em; position:absolute;">
        <div class="addthis_toolbox addthis_default_style addthis_32x32_style" id="addThis">
            <a class="addthis_button_preferred_1"></a>
            <a class="addthis_button_preferred_2"></a>
            <a class="addthis_button_preferred_3"></a>
            <a class="addthis_button_preferred_4"></a>
            <a class="addthis_button_compact"></a>
        </div>
    </div>
</asp:View>
<asp:View ID="View2" runat="server">                                
    <div id='addHere'></div>
</asp:View>

为此,我编写了一个简单的 javascript 模块来处理任务。

PageModules = {};
PageModules.AddThis = function ()
{
    var $addThis;

    function takeAddThis()
    {
        setTimeout(function ()
        {
            $addThis = $('#addThis');
            $addThis.remove();
        }, 100);
        Sys.Application.remove_load(takeAddThis);
    }

    function fixAddThis()
    {
        var $addHere = $('#addHere');
        if ($addHere.length)
        {
            $addHere.html($addThis);
        }
    }

    Sys.Application.add_load(fixAddThis);
    Sys.Application.add_load(takeAddThis);
} ();

请注意,PageModules 仅扮演命名空间 Angular 色,以避免弄乱全局范围。 AddThis 模块是自初始化的,它是一种单例。此外,您还需要引用 jQuery 或修改内部方法的主体。我用额外的“隐藏”div 包装了你的 AddThis div,不向用户显示它。加载所有脚本并根据 msdn 引用创建所有对象后调用 add_load 方法

http://msdn.microsoft.com/en-us/library/bb383829.aspx

我们只需要触发一次 takeAddThis,这样我就可以在第一次调用后解除绑定(bind)。额外的超时将我们的逻辑转移到队列的末尾,以确保正确执行 AddThis 逻辑(我也可以在这里使用 jQuery 中的 $(document).ready,但我想保持一致。

关于javascript - AddThis.com - 脚本管理器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4903310/

相关文章:

javascript - bokehjs 中多行的数据格式

javascript - 如何区分以编程方式触发的重置事件或通过重置按钮触发的重置事件?

asp.net - 您如何使用 WatiN 单击 Ajax 工具包 TabContainer header ?

c# - 清理 asp.net (mvc3) 中的用户输入以使其安全

javascript - 如何统计一个UpdatePanel的进度?

c# - 使用 Ajax 从服务器向客户端发送进度消息

JavaScript:onmouseout 事件在 onmouseover 后不起作用

javascript - DC.js lineChart 上序数比例的原始排序

asp.net - 母版页中的可扩展div

c# - 如何在同一个 .aspx 页面上使用两个更新面板