logo标签列表

将一个网页的HTML代码插入到另一个HTML页面中

javascriptjqueryhtmlajaxwindows
3

我对基于Web的材料还有点陌生，请多包涵。

我的本地驱动器上有两个HTML页面。 Test1.html和test2.html。

我该如何将test2.html的内容放入test1.html的主体中？

我已经研究过使用 w3IncludeHTML(); 以及类似jQuery .load()的东西。

Test1.html

<!DOCTYPE html>
<html>
    <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>
    <p id="text"></p>

    <script type="text/javascript">
    $('#text').load("test2.html");
    </script>

    </body>
</html>

Test2.html

<ul class='myclass'>
    <li>test li one</li>
    <li>test li two</li>
    <li>test li three</li>
</ul>
1
如果在脚本之前包含jQuery库，只需将test2.txt更改为test2.html，您的代码就应该可以正常工作。 - mplungjan
1
除了 @mplungjan 所说的，您还需要在 .load() 中使用正确的文件名。 - Cfreak
$('#text').load("test2.txt"); 你说的是 Test2.html 还是 test2.txt？这是一个笔误问题；代码可以正常工作。 - Funk Forty Niner
@Fred-ii- 我已经尝试过了，似乎仍然无法工作。我继续研究并发现“您无法像这样从本地文件系统加载文件，您需要将其放在Web服务器上并从那里加载。在您从中加载JavaScript的同一站点。”您有没有测试过file:/// 并在我的情况下在本地使其起作用？ - Brad
“像这样从本地文件系统加载文件是不可能的” - 这有点牵强附会。这可能只是一个本地问题，你的浏览器可能存在设置问题和/或插件防止文件加载/脚本执行或者你的操作系统。我能想到的唯一导致出现那个评论的方式是如果脚本读作 script type="text/javascript" src="//ajax.googleapis.com/。那个URL是什么？” - Funk Forty Niner
显示剩余7条评论
3个回答
1
0
我会尝试使用jQuery/Ajax方法：

Test1.html

    <!DOCTYPE html>
    <html>
    <head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>
    <p id="text"></p>    
</body>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
    $.ajax({
        type:'post',
        url:'get_file_contents.php',
        data:'file=Test2',
        success:function(content){
            var content = $.trim(content);
            $('#text').append(content);
        }
    });
    </script>
</html>

这是一个“get_file_contents.php”的示例

<?php
    $file=$_POST["file"].".html";
    $file_content=file_get_contents($file);

    echo $file_content;
?>

这个例子假设：

  1. 您的Web服务器正在运行PHP
  2. 所有3个文件（Test1.html，Test2.html和get_file_contents.php）都在同一个文件夹中。

希望这能帮到您。

这是在 PC 的桌面上本地完成的，没有设置服务器。 - Brad
他不想设置Web服务器/PHP。 - Funk Forty Niner
没有“服务器”功能，你会错过很多特性……为什么不在你的电脑上设置一个服务器？http://www.wampserver.com/en/ - Theo Orphanos
@Fred-ii- 刚看到你的回复...嗯，如果“服务器”不在考虑范围内，我就想不出其他的了:( - Theo Orphanos
1
@captaintheo 这是一个权限问题 https://dev59.com/mZ3ha4cB1Zd3GeqPYLC4#41348242 - Funk Forty Niner
@Brandon 我找到了一个关于如何获取文件内容并将其放入变量中的答案...（在我的答案中，变量名为“content”）https://dev59.com/umgu5IYBdhLWcg3wGTWd - Theo Orphanos
-1

由于“安全”原因，您的浏览器阻止了此操作。如果您打开浏览器的（JavaScript）控制台，您肯定会发现类似以下的错误：

Cross Origin Request not supported for file: schema

正如您在评论中所提到的，唯一的解决方案是在本地运行Web服务器并使用http[s]://模式。
"正如您在评论中提到的那样，唯一的解决方案是在本地运行Web服务器并使用http[s]：//模式。" - 不一定。这可能只是一个Windows权限问题，需要以管理员身份运行和/或允许它。我同意这是一个权限问题，但说唯一的解决方案是作为Web服务器运行并不是唯一的解决方案。" - Funk Forty Niner
你没有看过Brandon和我之间的聊天记录吗？http://chat.stackoverflow.com/rooms/131606/discussion-between-brandon-and-fred-ii 他自己说的。如果你认为我的答案是错误的，而且Brandon也错了，那么你需要@他并提出异议。 - Funk Forty Niner
我注意到你删除了我回复约翰的评论。当我在上面给你留言时，它很快就消失了。 - Funk Forty Niner
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接