Question

我是编码的新手，这是我第一次来这里，所以很容易：）

也请随时告诉我这是达到预期效果的愚蠢方式。

我正在开发公司内部网页，并已开始将页面加载到index.php页面中的容器中。哪个工作正常！

我遇到的问题是，同样的方法不适用于我在加载到容器中的页面中创建的按钮。

示例：

index.html

       <ul class="nav navbar-nav">
            <li><a href="#" id="load_HR"> HR</a>
            </li>
            <li><a href="#" id="load_FAQ"> FAQ</a>
            </li>
            <li><a href="#" id="load_info"> Info</a>
            </li>
            <li><a href="#" id="load_directory"> Directory</a>
            </li>
        </ul>

$( document ).ready(function() {
    $("#load_HR").on("click", function() {
    $("#content").load("HR.html");
});
    $("#load_FAQ").on("click", function() {
    $("#content").load("FAQ.php");
});
    $("#load_Info").on("click", function() {
    $("#content").load("info.html");
});
    $("#load_directory").on("click", function() {
    $("#content").load("directory.php");
});
});

<div id="content"></div>

这是我的Navbar按钮将页面加载到Container中的方式，这很好。

现在我想将HR.html页面中的页面加载到HR.html页面当前占用的容器中。

看起来很简单，听起来很复杂，而且我会围成一圈。

请帮忙！ :)

Answer 1

看起来JQuery .load（）函数尝试执行XMLHttpRequest 这会导致以下错误

cannot load Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

尝试使用普通JS，它对我有用。

$( document ).ready(function() { $("#load_HR").on("click", function() { document.getElementById("content").innerHTML='<object type="text/html" data="HR.html" ></object>'; });

所以你的代码看起来应该是这样的

       <ul class="nav navbar-nav">
            <li><a href="#" id="load_HR"> HR</a>
            </li>
            <li><a href="#" id="load_FAQ"> FAQ</a>
            </li>
            <li><a href="#" id="load_info"> Info</a>
            </li>
            <li><a href="#" id="load_directory"> Directory</a>
            </li>
        </ul>

$( document ).ready(function() {
    $("#load_HR").on("click", function() {
    document.getElementById("content").innerHTML='<object type="text/html" data="HR.html" ></object>';
});
    $("#load_FAQ").on("click", function() {
    document.getElementById("content").innerHTML='<object type="text/html" data="FAQ.php" ></object>';
});
    $("#load_Info").on("click", function() {
    document.getElementById("content").innerHTML='<object type="text/html" data="info.html" ></object>';
});
    $("#load_directory").on("click", function() {
    document.getElementById("content").innerHTML='<object type="text/html" data="directory.php" ></object>';
});
});

<div id="content"></div>

Answer 2

我找到了我的jQuery答案：

将此函数添加到加载到内容容器中的页面例如，当我加载HR.html页面时：

function loadbenefits() {
    $('#hrContent').load('CompanyBenefits.html');
}

然后创建一个按钮，将新页面加载到具有onClick（=“loadbenefits（）”的容器中，如下所示：

<button onClick="loadbenefits()" class="btn" type="button" value="Go"> Some Text </button>

使用容器中

2 个答案: