将本地HTML文件加载到div中

Question

将本地HTML文件加载到div中

5

我正在尝试将本地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>

- Mushy

你的 #blog div 可见吗？它有宽度和高度吗？ - DontVoteMeDown

3个回答

3

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

如果您正在进行测试，请使用类似xampp的东西，它非常容易设置。这也将提供更真实的网站工作视图。如果您实际上想将其用作真正的网页，我建议您寻找另一种方法来实现它。

- Nickydonna

不是真的。
创建AJAX驱动的网站有什么问题吗？

- Roko C. Buljan

3

@RokoC.Buljan — 是的。有很多，但这并不是这个答案所建议的（尝试在file://而不是http://上进行Ajax）。 - Quentin

Ajax网站非常棒，我自己使用AngularJS创建Web应用程序。我不建议加载本地文件，因为这不是浏览器功能，也不是真正的用例。 - Nickydonna

1

@donnanicolas 我相信他正在使用本地文件进行本地测试。他只需要像你建议的那样设置本地Web服务器即可。 - crush

1

我只是在本地测试。当我决定上传网站时，加载的HTML文件将被托管。 - Mushy

-1

其实，如果你只是想测试一张图片，我建议你可以使用相对路径来引用图片。例如：

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>

- Binhong Wu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roko C. Buljan · Accepted Answer

8

SOP (同源策略)。
这在Chrome中不起作用。
请在Firefox或Localhost上或在线服务器上尝试。

AJAX无法从file://工作，但可以从http://工作。

- Roko C. Buljan

2

谢谢，它在FF中可以运行。我已经因为这个问题感到相当沮丧了一段时间。 - Mushy

1

我不认为这是一个 Bug，只是一种愚蠢的实现方式。 - crush

@Andy 我相信你，我以前也有过头痛的时候。不用谢。 - Roko C. Buljan

@RokoC.Buljan，'SOP'是什么意思？还是打错了？ - Ionică Bizău

@John 嗯...同源策略 - Roko C. Buljan