javascript - 在 javascript 中使用文本框文本

Question

我正在使用以下脚本处理 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)

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

Answer 1

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

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

您最终会得到一个输入框，该输入框的 ID 和生成的名称!自己看看，查看页面上的源代码，您会看到您的输入框“TextBox1”实际上有一个 ID，看起来像“ctl00_form1_TextBox1”或类似的爵士乐。因此，您的 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 对象以便其他 child 也可以玩？任何。这是我得到的，我将保留它:

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