谢谢 Stilgar 解决了我的问题。 我只是创建一个 js 文件，并在将此文件添加到 UserControl 后将所有代码写入其中，在获得此 UserControl 的 html 后，我使用 $("#DivID").html(UserControlHTML); 现在可以使用了。
大家好；
我使用 Ajax 和 Webservice 来加载 UserControls。没关系，我可以轻松获取 UserControl 的 html 代码，但是有一个问题。
例如 UserControl 的 html 代码就是类似的东西。
<h3>Header</h3>
<div id="content">
<p>lorem ipsum dolor sit amet...</p>
</div>
<script type="text/javascript">
alert("This is a message");
</script>
<h3>Footer</h3>
请求用户控件的html代码的Javascript代码
(用法 UserControlYukle("UserControls/Article.ascx"); )
//This is a function that i request UserControl's html code from WebService
function UserControlYukle(ControlPath) {
PersonalWebPage.Services.LoadUserControl.GetControlHtml(ControlPath, Success, Failed);
}
function Success(result) {
var RsltElem= $get("Icerik");
RsltElem.innerHTML = result;
}
function Failed(error) {
alert(error.get_message());
}
Web 服务代码 (LoadUserControl.asmx)
//This is the code block which is in WebService
//and returning back UserControl's html code.
public string GetControlHtml(string controlLocation)
{
Page page = new Page();
UserControl userControl = (UserControl)page.LoadControl("~/UserControls/" + controlLocation);
userControl.EnableViewState = false;
HtmlForm form = new HtmlForm();
form.Controls.Add(userControl);
page.Controls.Add(form);
StringWriter textWriter = new StringWriter();
HttpContext.Current.Server.Execute(page, textWriter, false);
return textWriter.ToString();
}
当我得到这个 html 代码并将其插入到 div 的innerHTML 中时。 html 看起来应该是这样。但是在用户控件上编写的 JavaScript 代码不起作用。 它应该给我警报，但事实并非如此。
最佳答案
似乎分配innerHtml属性不会触发JS执行。如果这是您经常使用的模式，您可以按照约定定义一些函数，例如 ajaxCallbackControlName，其中 ControlName 是当前控件的名称。然后将警报包装在该函数中，并在调用警报的地方调用该函数。这样，控件在正常加载时(不通过服务)将工作相同。另一方面，在服务的成功函数中，您应该能够像这样调用该函数:
window["ajaxCallback" + controlName]();
(有关更多详细信息，请参阅 How to execute a JavaScript function when I have its name as a string)
但是，如果页面上存在同一控件的多个实例，则使用此方法将会遇到问题，因为所有实例都会被触发。您可以通过将随机字符串作为参数添加到服务并将其添加到函数名称来解决此问题。
所有这些都是一个 super 通用的解决方案，应该适用于任何控件和其中的任何 js 代码，但实际上您可能需要一个更具体的解决方案，例如在 JS 文件中加载回调函数并为加载特定控件创建特定函数通过该服务。设置innerHtml属性后就可以调用需要的回调函数了。
编辑: 看来设置innerHTML不会定义函数。所以你应该自己评估代码。这是一个简单的客户端示例。
<html>
<body>
test
<br />
<div id="testDiv"></div>
<br />
<input type="button" onclick="insert()" value="Insert" />
<script type="text/javascript">
function insert(){
var element = document.getElementById("testDiv");
element.innerHTML = "test innerHTML <script id='loadScript' type='text/javascript'> function foo() {alert('test'); } <\/script> ";
eval(document.getElementById("loadScript").innerHTML);
foo();
}
</script>
</body>
</html>
另一种方法是选择所有脚本元素，例如通过 JQuery 并评估其内容。还值得检查 JQuery API 是否具有某种功能来设置 HTML 和执行脚本。
编辑 2:看起来 JQuery html() 函数正是具有这种行为。如果您使用 JQuery，您可以像这样更改 Success 函数:
function Success(result) {
$("Icerik").html(result);
}
关于当 UserControl 使用 Ajax 加载时，Javascript 代码不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4482833/