我使用以下脚本处理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？
答案 0 :(得分：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”，你将能够以你想要的方式获得它的价值。
修改
因此，上述问题显然不适用于这个问题。发生的事情是，推特小部件的东西很奇怪，如果你想使用动态ID，它就会变得很尴尬。
当twitter小部件运行时，它使用document.write（）调用来构造小部件。因此，如果您的网页已经存在，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>
答案 1 :(得分：1)
我不是.NET人员，但使用TextBox1.Text应该是服务器端代码，例如ASP.NET。由于您在JavaScript（客户端）中使用它，您应该这样做：
render().setUser(document.getElementById('TextBox1').value).start();