Question

我创建了一个显示图片库的页面（ imagenes.html ）：

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">  
    <script type="text/javascript" src="js/zepto.min.js"></script>  
    <script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
    <div id="gallery"></div>
    <div id="image"></div>
</body>
</html>

javascript代码是（ slider.js ）：

$(function() {

function loadSliderImage() {    
    var i, f, n;

    for (i = 1; i < 49; ++i) {
        n = ((i < 10) ? "0" : "") + i
        f = n + "-120.JPG";
        $("#gallery").append("<img src='images/cocinas/thumbs/" + f + "' rel=" + n + "></img>");
    }
}

$("#gallery").on('click', 'img', function() {
    $("#image").html("<img src='images/cocinas/small/" + $(this).attr("rel") + "-600.JPG' rel=" + $(this).attr("rel") + "></img>");
});

$("#image").on('click', 'img', function(e) {
    var url = "images/cocinas/large/" + $(this).attr("rel") + "-980.JPG";
    window.open(url, 'KitchenMaster', "width = 980, height = 670, scrollbars = no");
    e.preventDefault();
});

loadSliderImage();

});

如果我执行 imagenes.html ，可以正常使用，但如果我执行加载 imagenes.html 的 index.html 页面：

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/zepto.min.js"></script>  
<script type="text/javascript" src="js/km.js"></script>
<title>Gallery</title>      
</head>
<body>
<div id="content"></div>
</body>
</html>

使用javascript代码（ km.js ）：

$(function() {

$("#content").load("imagenes.html");

});

页面 imagenes.html 无效（javascript代码 slider.js 无法运行）

你能帮助我吗？

提前致谢。

Answer 1

您正在HTML中添加HTML，它不会工作，您不能在同一个HTML中有两个头部和正文部分。而是在 imagenes.html 中只保留那两个div'图库'，'图片'和javascript内容，然后将其加载到索引中。 HTML

无法从加载的页面执行javascript代码

1 个答案: