包括 html 中的 html 与 jquery 负载不工作

Question

I'm new to web dev so I feel like I'm missing something simple.我是 web dev 的新手，所以我觉得我错过了一些简单的东西。 I really just need someone to point out what I missed?我真的只需要有人指出我错过了什么吗？

I'm trying to include a local html file into another html file using jquery load() function.我正在尝试使用 jquery load() ZC1C4145268E1798 将本地 html 文件包含到另一个 html 文件中。 I followed some suggestions from other stackoverflow posts .我遵循了其他stackoverflow 帖子的一些建议。 It seems like it should be very simple and work fine, but it's not working.看起来它应该非常简单并且工作正常，但它不起作用。 I did add the jquery source into the head, and made sure the part where I'm inserting in the body included the correct div id.我确实将 jquery 源添加到头部，并确保我插入主体的部分包含正确的 div id。 I don't need to insert a particular portion of the local html, just the whole thing.我不需要插入本地 html 的特定部分，只需插入整个内容即可。 That html is just text and only includes <p> tags and similar things.那 html 只是文本，只包含<p>标签和类似的东西。

Here's the code:这是代码：

<html>
<head>
    <meta charset="utf-8" />
    <title>letters on the road</title>
    <link rel="stylesheet" type="text/css" 
    href="../assets/css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script> 
    $(function(){
        $("#includedContent").load("text-012518.html"); 
    });
    </script> 
</head>
<body style="font-family:Andale Mono Regular">
    <div id="includedContent"></div>
    <a href="../index_v2.html">home</a>
</body>
</html>

I feel like jquery load seemed the cleanest option.我觉得 jquery 负载似乎是最干净的选择。 I did try using the object tag, but it puts the text in a tiny scrollable box in the corner of the window.我确实尝试过使用 object 标签，但它会将文本放在 window 角落的一个微小的可滚动框中。 I'm not familiar enough with css to fix it, so still hoping that jquery load will work well.我对 css 不够熟悉来修复它，所以仍然希望 jquery 负载能够正常工作。

My code above doesn't throw error, it just doesn't include anything at all from the external html.我上面的代码没有抛出错误，它根本不包含来自外部 html 的任何内容。 (The text in the external html did show up with object so I don't think it is a problem with the external html itself.) I've also tried the code without the $(function(){}); （外部 html 中的文本确实显示为 object 所以我认为外部 html 本身没有问题。 $(function(){}); wrapper and it also doesn't work.包装器，它也不起作用。

what shows up on the page页面上显示的内容

Answer 1

Most of the stack overflow solutions ( Answer 1 , Answer 2 and many more) do not work.大多数堆栈溢出解决方案（答案 1 、答案 2等等）都不起作用。 The solutions implemented with Jquery.load() or XMLHttpRequest fails (at least on chrome) due to CORS issue.由于 CORS 问题，使用Jquery.load()或XMLHttpRequest实现的解决方案失败（至少在 chrome 上）。 Work around will be to disable the security by adding --disable-web-security flag or using a CORS chrome extension , which both are only suitable for testing and not on a production application.解决方法是通过添加--disable-web-security标志或使用CORS chrome extension来禁用安全性，这两者都只适用于测试而不适用于生产应用程序。

Access to XMLHttpRequest at 'file:///.../text.html' from origin 'null' has been blocked by CORS policy: 
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

These two approaches work -这两种方法有效 -

Use <object> tag -使用<object>标签 -

<object data="test.html"></object>

Use iframe tag -使用iframe标签 -

<iframe src = "test.html" height="80px" width="500px" >

My approach would be to use Jquery/vanila javascript to load the html using the object tag.我的方法是使用 Jquery/vanila javascript 使用object标签加载 html。 Add the script tag to the bottom of the page.将script标签添加到页面底部。 Looking for more answers.寻找更多答案。

<script>
document.getElementById("includedContent").innerHTML='<object data="text.html"></object>';
</script>

包括 html 中的 html 与 jquery 负载不工作

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-05-24 03:43:05

包括 html 中的 html 与 jquery 负载不工作

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-05-24 03:43:05

解决方案1
1 已采纳 2020-05-24 03:43:05