Question

基本上我试图构建一个我只编辑index.php的功能，我有很多其他的php文件只有一个表单或只有几行文字。
我想要实现的是将这些其他文件加载到我的index.php。{/ p>的contentwrapper中

我使用iframe和html <object>成功完成此操作。
这些问题虽然首先是他们在DOM中加载了一个全新的#document，而且我的网页也没有设置高度，因此height: 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>

现在您可能会质疑data-include是什么，这是我在SO上找到的非常好的解决方法。

THIS is what it does，它基本上调用.js文件，用文件(target in the above example)

中的数据替换包含元素

我将此功能称为：

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

只要将其添加到DOM中就可以了：

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

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

（顺便说一句：如果我在没有javascript的情况下手动将它放在标签中，data-include属性会起作用）

我希望我没有过度解释这种情况，我感谢所有试图提前帮助的人！

Answer 1

csi.js脚本仅在加载页面后运行一次。它只是遍历具有data-include属性的所有元素，并运行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>

然后这样称呼：

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

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

Answer 2

我们可以假设您从存储库中遵循此建议：唯一需要注意的是Chrome，它限制通过AJAX访问本地文件。要解决此问题，只需将--allow-file-access-from-files添加到Chrome运行时。

如果您没有，并且您正在使用Chrome，那么这对我来说很突出，而且您没有表明您已经纠正了Chrome放置的安全块

Answer 3

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

<a href="#" onclick="function() {load_content('update.php'); window.onload(); }">
Update profile</a>

javascript函数加载其他文件内容的问题

3 个答案: