Question

我正在尝试将本地html文件加载到div中，但它似乎确实有效（显示警报，但页面上没有显示任何内容）。

HTML：

<!DOCTYPE html>
<html lang="en">
    <head> 
        <meta charset="utf-8"> 
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>                   
        <script type="text/javascript" src="test.js"></script>
    </head>

    <body>
        <div id="blog"></div>   
    </body>
</html>

Javascript（test.js）：

$(document).ready(function(){   
        $("#blog").load("tester.html", function() {
            alert('Load was performed.');
        });
});

加载的HTML文件（tester.html）：

<p>
   The word <strong>hello</strong> should be bold.
</p>

Answer 1

SOP （同源政策）。
这不适用于 Chrome 。
尝试 Firefox 或 Localhost 或在线服务器。

AJAX无法使用file://但http://

Answer 2

我不知道你为什么这样做，但我认真不推荐它。出于安全原因，浏览器禁止此行为，您无法从文件系统加载内容。

如果您正在测试，请使用像xampp这样的东西，这很容易设置。它还将提供有关网站如何工作的更真实的视图。如果您真正尝试将其用作真实网页，我建议您搜索其他方式来执行此操作。

Answer 3

实际上，如果您只是想对图像进行测试，我建议您可以使用相对路径来引用图像。例如：

cp ~/1.png ~/Workspace/html/app/1.png
vim ~/Workspace/html/app/test.html

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body style="border-radius: 5px; border: 0px;">
        <img src="test.jpg">
    </body>
</html>

将本地html文件加载到div中

3 个答案: