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)

テキストボックスに値があり、ボタンをクリックするとスクリプトが実行される場合、なぜnullになるのかわかりません。

4

2 に答える 2

2

次のように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（）呼び出しを使用してウィジェットが作成されます。したがって、Webページがすでに存在する場合、document.writeはページを上書きするだけです。私が考えることができる最善のことは、それをiframeにロードしてから、iframeにロードされたものをページ上の任意の場所にコピーすることです。

ウィジェットをiframeに読み込むためだけに別のページを作成するのではなく、iframeページを動的に作成しようとしました。結局、Firefox 13では動作するように見えますが、IE 8では動作しないという以下のことを思いつきました。また、それ以降のバージョンのIEではテストしていません。おそらく、このメソッドを調整して、サーバーによって生成された完全に別のページにウィジェットをロードすることもできます。または、ウィジェットをiframeにロードしてから、ページ上の表示したい場所にiframeを配置することもできます。

とにかく、これをすべて作った後、私は今ツイッターウィジェットが嫌いです。それは完全に愚かです。なぜ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 の専門家ではありませんが、ASP.NET などのサーバー側TextBox1.Textコードを使用することになっています。JavaScript（クライアント側）で使用しているため、代わりにこれを行う必要があります。

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