1

我正在使用以下脚本使用 Twitter 小部件-

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<input type="button" value="Run Function" onclick="test();" />   
<script>

function test() {

    new TWTR.Widget({
        version: 3,
        type: 'profile',
        rpp: 8,
        interval: 30000,
        width: 315,
        height: 340,
        theme: {

            shell: {
                background: '#333333',
                color: '#ffffff'


            },
            tweets: {
                background: '#000000',
                color: '#ffffff',
                links: '#4aed05'

            }
        },
        features: {
            scrollbar: false,
            loop: false,
            live: false,
            behavior: 'all'

        }
    }).render().setUser(document.getElementById('TextBox1').value).start();
}

在单击按钮中使用该功能test();时，它会出现错误 -

Error: Unable to get value of the property 'value': object is null or undefined

所以它似乎没有达到 -

(document.getElementById('TextBox1').value)

如果文本框有一个值然后在按钮单击时运行脚本，我不确定为什么它为空？

4

2 回答 2

2

当您像这样在 ASP.NET 中指定一个元素时：

<asp:TextBox ID="TextBox1" runat="server">

您最终会得到一个具有生成名称的 ID 的输入框！自己看一下，查看页面上的源代码，你会发现你的输入框“TextBox1”实际上有一个看起来像“ctl00_form1_TextBox1”或类似爵士乐的ID。因此，您的 getElementById 调用当然不会找到任何 ID 为“TextBox1”的元素 - 因为没有。幸运的是，您可以更改此行为。只需添加一个“ClientID”属性，如下所示：

<asp:TextBox ID="TextBox1" runat="server" ClientIDMode="Static">

这样，您的输入框将真正具有 ID“TextBox1”，并且您将能够以您尝试的方式获取它的值。

编辑

因此，上述内容显然不适用于这个问题中的问题。发生的事情是 twitter 小部件很奇怪，如果您想使用动态 ID，它会变得很尴尬。

当 twitter 小部件运行时，它使用 document.write() 调用来构造小部件。因此，如果您的网页已经存在，则 document.write 只会覆盖该页面。我能想到的最好的办法是将它加载到 iframe 中，然后将 iframe 中加载的内容复制到页面上您想要的任何位置。

我没有创建一个单独的页面来将小部件加载到 iframe 中，而是尝试动态构建一个 iframe 页面。最后，我想出了下面的方法，它似乎在 Firefox 13 中可以工作，但在 IE 8 中不起作用，我还没有在更高版本的 IE 中测试它。可能可以调整此方法，以便将小部件加载到服务器生成的完全独立的页面中 - 或者您甚至可以将其加载到 iframe 中，然后将 iframe 放在页面上您希望它出现的位置。

无论如何，在做了这一切之后，我现在讨厌 twitter 小部件。这完全是愚蠢的。为什么一定要用document.write？为什么它不能很好玩并构造 DOM 对象以便其他孩子也可以玩？任何。这就是我得到的，我将把它留在那里：

<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="false"
    CodeFile="Default.aspx.vb" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<link href="//widgets.twimg.com/j/2/widget.css" rel="stylesheet" type="text/css">

</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<script type="text/javascript" charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script type="text/javascript">

    function fn(usr) {
        var ifr = document.createElement("iframe");
        document.body.appendChild(ifr);
        ifr.style.visibility = "hidden";

        ifr.contentWindow.document.write("<script type=\"text/javascript\" charset=\"utf-8\" src=\"http://widgets.twimg.com/j/2/widget.js\"></" + "script>");
        ifr.contentWindow.document.write("<script>" + fn2.toString() + ";</" + "script>");
        ifr.contentWindow.document.write("<script>fn2('" + usr + "')</"+"script>");
        ifr.contentWindow.document.close();

        t = setInterval(function () {
            if (ifr.contentWindow.document.readyState == "complete") {
                clearInterval(t);
                setTimeout(function () {
                    try {
                        var frame_styles = ifr.contentWindow.document.getElementsByTagName("style");
                        for (i = 0; i < frame_styles.length; i++) {
                            var newstyles = document.createElement("style");
                            newstyles.innerHTML = frame_styles[i].innerHTML;
                            document.body.appendChild(newstyles);
                        }
                    } catch (ex) { }

                    document.getElementById("sloc").innerHTML = ifr.contentWindow.document.body.innerHTML;

                }, 1000);
            }
        }, 50);

    }

    function fn2(usr) {
        new TWTR.Widget({
            version: 2,
            type: 'profile',
            rpp: 4,
            interval: 30000,
            width: 250,
            height: 300,
            theme: {
                shell: {
                    background: '#333333',
                    color: '#ffffff'
                },
                tweets: {
                    background: '#000000',
                    color: '#ffffff',
                    links: '#4aed05'
                }
            },
            features: {
                scrollbar: false,
                loop: false,
                live: false,
                behavior: 'all'
            }
        }).render().setUser(usr).start();
    }

</script>

<input type="text" id="txtfield" />
<asp:Button ID="Button1" Text="Click" OnClientClick="fn(document.getElementById('txtfield').value);return false;" runat="server" />
<div id="sloc"></div>

</asp:Content>
于 2012-06-11T10:36:11.877 回答
1

我不是 .NET 人，但TextBox1.Text应该使用服务器端代码，例如 ASP.NET。由于您在 JavaScript（客户端）中使用它，因此您应该这样做：

render().setUser(document.getElementById('TextBox1').value).start();
于 2012-06-11T08:58:46.100 回答