Question

是否可以为网页的特定部分导入html文件（包含javascript和css）。

base.html文件

<link rel="stylesheet" type="text/css" href="multi/jquery.multiselect.css" />
        <link rel="stylesheet" type="text/css" href="multi/assets/style.css" />
        <link rel="stylesheet" type="text/css" href="multi/assets/prettify.css" />
        <link rel="stylesheet" type="text/css" href="multi/jquery-ui.css" />
        <script type="text/javascript" src="multi/jquery.js"></script>
        <script type="text/javascript" src="multi/jquery-ui.min.js"></script>
        <script type="text/javascript" src="multi/src/jquery.multiselect.js"></script>
        <script type="text/javascript" src="multi/assets/prettify.js"></script>
        <script language="javascript">
            $(function(){

    var $callback = $("#callback");

    $("select").multiselect({
        click: function(event, ui){
            $callback.text(ui.text + ' ' + (ui.checked ? 'Selected' : 'Removed') );
        },
        checkAll: function(){
            $callback.text("Check all clicked!");
        },
        uncheckAll: function(){
            $callback.text("Uncheck all clicked!");
        },
        optgrouptoggle: function(event, ui){
            var values = $.map(ui.inputs, function(checkbox){
                return checkbox.value;
            }).join(", ");

            $callback.html("<strong>Checkboxes " + (ui.checked ? "checked" : "unchecked") + ":</strong> " + values);
        }
    });

});
        </script>

我有另一个页面，其中包含许多html元素

sample.jsp

<html>
    <head>

        <%@include file="../style/inter_header.html"  %>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>

        <title>Home</title>

        <link rel="stylesheet" href="../dialog/themes/jquery.ui.all.css"></link>
        <script src="js/action.js"></script>
        <link rel="stylesheet" href="../dialog/demos/demos.css"></link>
</head>
<body>
<input type="text" name="first">

<select name="myselection">
<option value="a">A</option>
<option value="b">B</option>
</select>

<select multiple="multiple" name="myselection2">
<option value="a">A</option>
<option value="b">B</option>
</select>

<input type="text" name="first">
</body>
</html>

现在，我想要，导入 base.html 的脚本和css只能用于 sample.jsp

的一个元素

<select multiple="multiple" name="myselection2">
    <option value="a">A</option>
    <option value="b">B</option>
    </select>

因此， sample.jsp 的布局和样式不应受整个页面的影响。如果以上信息不足以理解，请告诉我。

帮助赞赏!!

Answer 1

您可以使用jQuery加载。

$('#someElement').load('sample.html #someElementSelector');

选择器可以只注入页面的某个部分。但是，这不会加载脚本或CSS。我的建议是将脚本/ CSS添加到页面本身。您可以使用事件委派（$.delegate()或1.7 $.on()）。

导入网页特定块的html文件

1 个答案: