Question

这是我的主要索引代码。我想在div中插入一个名为＆＃34; divPage。＆＃34;

的外部html代码

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
    <title>Retail Exchange Network</title>
    <meta name="viewport" content="width=device-width, initial-scale = 1, maximum-scale=1, user-scalable=no" />

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">

    <!-- Personal Stylesheets -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="CSS/RXN/style.css">


    <!-- Scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="JS/RXN/script.js"></script>

</head>

<body>

//header, navigation code here//

    <!-- content -->
    <div id="wrapper">
        <div id="index-content">
            <div id="divPage">

            </div>
        </div>
    </div>

    //footer code here//
</body>
</html>

这是外部html。当用户点击浏览器图像的缩略图时，它应显示并隐藏有关该浏览器的信息

<div data-scripturl="./GUI/Home/index.js">
    //html code for this external file//
</div>

这是./GUI/Home/index.js脚本（这是在外部html中切换表）

(function () {
    var $tables = $("table");
    var previous = null;

    var $thumbnails = $(".img-fluid.w-100.img-thumbnail");

    var hide = function () {
        $tables.hide();
    };

    var initialize = function () {
        hide();
    };

    var registerEvents = function () {
        $thumbnails.on("click", function (e) {
            e.preventDefault();

            var image = $(e.currentTarget);
            var anchor = image.parent();
            var href = anchor.attr("href");

            hide();

            if (previous === href) {
                previous = null;
            }
            else {
                $(href).show();
                previous = href;
            }
        });
    };

    registerEvents();
    initialize();
})();

这是我将脚本插入主索引的脚本。

$(document).ready(function () {
    $("#divPage").load("GUI/Home/index.html");
});

我的问题是，我能够将外部html的内容插入到我的主index.html中，但是与外部html一起使用的脚本不起作用。我还是jQuery的新手，所以对我的任何建议都会非常有用！

Answer 1

我没有看到任何加载脚本的代码。

我想你可以试试：

$(document).ready(function() {
    $("#divPage").load("GUI/Home/index.html", function() {
        $.getScript($("#divPage").children(':first').attr('data-scripturl'));
    );
});

将包含脚本的外部html文件加载到另一个div

1 个答案: