javascript - 如何在JS的文本中包含JS

Question

我有一个函数，ajaxinclude()，它包含页面的内容。 当写成这样时它可以完美地工作:

<div>
     <script type="text/javascript">
          ajaxinclude("info/content/About.php")
     </script>
</div>

现在，我想要一个单击按钮，这应该会出现。 因此，

<button onclick="document.getElementById('aaa').innerHTML = '<script type='text/javascript'>ajaxinclude(\'info/content/About.php\');</script>">Hello</button>

但这行不通。

另一种方法是

<button onclick="document.getElementById('aaa').innerHTML = '<script type='text/javascript'>' + ajaxinclude('info/content/About.php') + '</script>">Hello</button>

但这也行不通。

这是我的 ajaxinclude() 函数:

var rootdomain = "http://" + window.location.hostname;

function ajaxinclude(url) {
    var page_request = false

    if (window.XMLHttpRequest)
    page_request = new XMLHttpRequest()
    else if (window.ActiveXObject){
        try {
            page_request = new ActiveXObject("Msxml2.XMLHTTP")
        } 
        catch (e){
            try{
                page_request = new ActiveXObject("Microsoft.XMLHTTP")
            }
            catch (e){}
        }
    }
    else
    return false
    page_request.open('GET', url, false)
    page_request.send(null)
    writecontent(page_request)
}

function writecontent(page_request){
    if (window.location.href.indexOf("http")==-1 || page_request.status==200)
    document.write(page_request.responseText)
}

如何，如何在单击按钮时包含文本？

PS:我不需要 jQuery。

Answer 1

尝试

<button onclick="document.getElementById('aaa').innerHTML = ajaxinclude('info/content/About.php')">Hello</button>

但是我必须警告内联 JavaScript 是不好的做法，尤其是像这样!您可以重写 writecontent 函数以接受两个参数:页面请求和要写入的目标的 ID。

您的新 writecontent 函数将是:

function writecontent(page_request, write_target){
    if (window.location.href.indexOf("http")==-1 || page_request.status==200) {
        document.getElementById(write_target).innerHTML = page_request.responseText;
    }
}

您需要在那里传递写入目标的 ID，并且由于您是从 ajaxinclude 调用 writecontent，因此您还需要那里的参数:

function ajaxinclude(url, write_target) {
    // ...
    writecontent(page_request, write_target);
}

在按钮中:

<button onclick="ajaxinclude('info/content/About.php', 'aaa')">Hello</button>

可选择继续...

更好的方法是将 click 操作绑定(bind)到按钮，而不是使用 onclick。使用 jQuery 会更容易，但由于您明确声明不想使用 jQuery，因此您也可以在 JavaScript 中使用 addEventListener() 来实现:

document.getElementById('thisbutton').addEventListener('click', function(){ajaxinclude('info/content/About.php', 'aaa')}, false);

这会将按钮更改为:

<button id='thisbutton'>Hello</button>

Read more about event listeners at the Mozilla Developer Network .