Question

谢谢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());
}

Webservice Codes（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看起来应该。但是写在usercontrol上的javascript代码不起作用。它应该让我警觉但不是。

Answer 1

似乎分配innerHtml属性不会触发JS执行。如果这是您经常使用的模式，则可以按惯例定义某个函数，例如ajaxCallbackControlName，其中ControlName是当前控件的名称。然后将警报包装在该函数中，并在调用警报的位置调用该函数。这样，当正常加载（不是通过服务）时，控件将工作相同。另一方面，在服务的成功函数中，您应该能够像这样调用函数：

window["ajaxCallback" + controlName]();

（有关详细信息，请参阅How to execute a JavaScript function when I have its name as a string）

但是，如果页面上存在多个相同控件的实例，则使用此方法会出现问题，因为所有这些实例都将被触发。您可以通过将随机字符串作为参数添加到服务并将其添加到函数名称来实现此目的。

所有这些都是一个超级通用的解决方案，应该适用于任何控件及其中的任何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代码无法正常工作

1 个答案: