Question

这是我的HTML：

<!DOCTYPE html>

<html>
    <head>
        <title>Free Jokes!</title>
        <meta charset="utf-8">
        <link href="final%20project.css" rel="stylesheet">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    </head> 

    <body>


        <div id="left"></div>
        <script type="text/javascript">
        $(document).ready(function() { 
        $('#left').load("left.html");
        });
        </script>

        <div id="right"></div>
        <script type="text/javascript">
        $(document).ready(function() { 
        $('#right').load("right.html");
        });
        </script>
    </body>
</html>

html打开正常，但我的左右html文档没有显示。这可能是因为没有正确输入代码。我有什么不对的吗？

有没有办法可以在不使用iframe的情况下将我的左右html文档引用到此？

Answer 1

load函数尝试对指定的位置进行ajax调用（请记住，这里是JavaScript，我们在客户端上），因此，除非您指定绝对URL，否则它将无法从正确的位置进行检索。此外，假设left.html和right.html是完整的文档，包括doctype和<head>等，这将产生无效的HTML。

尝试以下方法：

<html>
    <head>
        <title>Free Jokes!</title>
        <meta charset="utf-8">
        <link href="final%20project.css" rel="stylesheet">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    </head> 

    <body>

        <iframe id="left" frameborder="0" style="border: 0;" src="left.html"></iframe>
        <iframe id="right" frameborder="0" style="border: 0;" src="right.html"></iframe>

    </body>
</html>

虽然它并不完美，但它至少应该正确显示页面。

如何使用jQuery将html文档引用到div中的另一个html文档？

1 个答案: