javascript函数从其他文件加载内容时出现问题

基本上，我正在尝试构建一个功能，在其中我只真正编辑index.php，我得到了很多其他php文件，其中只有一个表单或几行文本。
我想要实现的是在index.php的

contentwrapper

中加载这些其他文件

我已经成功地用

iframe

和html

实现了这一点
但问题是，首先他们在DOM中加载了一个全新的

#文档

，而且我的网页没有设置高度，所以

高度：100%

无法处理这些内容，我会得到这些难看的滚动条之类的东西

在搜索了很多之后，今天我找到了一些有趣的解决方案，我将它们结合在一起，这就是我现在正在尝试的：

<script type="text/javascript" href="js/csi.min.js"></script>
<script type="text/javascript">

function load_content(target){
    document.getElementById('contentwrapper').innerHTML='<div data-include="' + target + '" ></div>';
    return false;
}

</script>

它可以将以下内容添加到DOM中：

<div id="contentwrapper">
    <div data-include="update.php" ></div>
</div>

---

但除此之外，它什么也不做，我认为它没有为data include属性调用.js文件。但我找不到解决办法

（顺便说一句：如果我在没有javascript的情况下手动将data include属性放入标记中，那么data include属性确实有效）

---

我希望我没有夸大这种情况，我感谢所有试图提前提供帮助的人

我们可以假设您遵循了存储库的建议：唯一的警告是Chrome，它限制通过AJAX访问本地文件。要解决这个问题，只需将--allow文件访问权限从文件添加到Chrome运行时

---

如果您没有，并且您使用的是Chrome，那么这对我来说很突出，您没有表示您已经更正了Chrome设置的安全块。

csi.js仅在window.onload上运行。 试一试

加载页面后，脚本只运行一次。它只是使用

datainclude

属性遍历所有元素并运行

fragment

函数

<script type="text/javascript">
function fragment(el, url) {
    var localTest = /^(?:file):/,
        xmlhttp = new XMLHttpRequest(),
        status = 0;

    xmlhttp.onreadystatechange = function() {
        /* if we are on a local protocol, and we have response text, we'll assume
         * things were sucessful */
        if (xmlhttp.readyState == 4) {
            status = xmlhttp.status;
        }
        if (localTest.test(location.href) && xmlhttp.responseText) {
            status = 200;
        }
        if (xmlhttp.readyState == 4 && status == 200) {
            el.outerHTML = xmlhttp.responseText;
        }
    }

    try { 
        xmlhttp.open("GET", url, true);
        xmlhttp.send();
    } catch(err) {
        /* todo catch error */
    }
}

function load_content(target){
    fragment(document.getElementById('contentwrapper'), target);
    return false;
}
</script>

函数片段（el，url）{
var localTest=/^（？：文件）：/，
xmlhttp=新的XMLHttpRequest（），
状态=0；
xmlhttp.onreadystatechange=函数（）{
/*如果我们使用的是本地协议，并且我们有响应文本，我们将假设
*事情是成功的*/
if（xmlhttp.readyState==4）{
status=xmlhttp.status；
}
if（localTest.test（location.href）和&xmlhttp.responseText）{
状态=200；
}
if（xmlhttp.readyState==4&&status==200）{
el.outerHTML=xmlhttp.responseText；
}
}
试试{
open（“GET”，url，true）；
xmlhttp.send（）；
}捕捉（错误）{
/*todo捕捉错误*/
}
}
功能加载内容（目标）{
片段（document.getElementById（'contentwrapper'），目标）；
返回false；
}

那么就这样称呼它：

<a href="#" onclick="load_content('update.php');">Update profile</a>

<a href="#" onclick="load_content('update.php');">Update profile</a>

---

因此，您只需要为新创建的元素调用此函数。将DOM元素和url传递给此函数，它将负责将请求的资源的内容加载到相应的元素中。

“我认为它不会为data include属性调用.js文件”听起来似乎有道理，代码不会执行，因为它没有在任何地方调用，或者在页面加载完成后调用

load\u content

函数之前执行。你需要在

load\u content

函数的末尾调用任何处理该数据属性的函数。是的，我也这么认为，但我在任何地方都找不到如何做到这一点，在我的函数运行后，如何使文件

csi.min.js

再次运行？你为什么不使用PHP Include？不知道如何，你能帮我解释一下吗？很简单。好的，用这个，我自己去玩这个JS，看看会发生什么。是的，我自己刚到那里。似乎代码可以使用重构来加载任意元素，而不需要属性。提取fragment（）并使用它是一个第一眼的解决方案。我喜欢这个解决方案，只有当我尝试这个方法时，什么都不会发生，这也有点违背了使用函数的目的，我会尝试将

window.onload（）在函数本身中。我不确定我是否理解“违背使用函数的目的”背后的逻辑。响应单击需要函数，而将内容加载到页面元素需要函数。正如所写的那样，脚本本身是服务器端包含的客户端替代品（如果您要将所有内容都绑定到页面负载，那么这实际上是一种更好的方式）。好的，我会继续处理它——我认为Overflow已经找到了答案。它对我很有用。我在让它在JSFIDLE上运行时遇到了麻烦，所以我的网站不支持它：。非常感谢，这看起来是我需要的答案，我需要将此代码添加到我的javascript中，还是我可以直接调用它？是的，您需要将此函数与任何其他函数一样包含在代码中。那就叫它吧。我明白了，我现在就试试；）很抱歉我的无知，但是我需要传递什么作为这个函数的参数呢？如果我只调用
fragment（）
在我的
load\u类中，它不起作用，只需使用PHP包含，它完全满足您的需要，而且非常简单！！
<a href="#" onclick="load_content('update.php');">Update profile</a>