如何在子html文件上替换父div标签中的子html文件？答案

【问题标题】：How to replace child html file in parent div tag while on child html file?如何在子html文件上替换父div标签中的子html文件？
【发布时间】：2020-01-17 06:41:17
【问题描述】：

我正在尝试将子 HTML 文件更改为另一个文件，但它不起作用

但我不想使用 iframe。

等等

file1.html（父）div 标签显示 file2.php（子）

现在我想在点击 file2（子）表行时将 file2.php 替换为 file3.php

function callURL(url) {
    location.href = url;
}

这将加载新标签。我只想替换 div 标签

【问题讨论】：

添加您的完整代码。
How to Show External website inside another page without iFrame?的可能重复

标签： javascript php html

【解决方案1】：

iframe 的一些替代解决方案是：

AJAX - 您可以使用 XMLHttpRequest 对象检索数据并将其注入您的页面，例如在 div 中。使用 jQuery 的示例：

 $( "#result" ).load( "ajax/test.html" );

HTML5 Web Components - HTML Imports 是 Web Components 的一部分，允许将 HTML 文档捆绑到其他 HTML 文档中。这包括 HTML、CSS、JavaScript 或 .html 文件可以包含的任何其他内容。示例：

   <link rel="import" href="http://stackoverflow.com">

其他一些想法是：

<object> 标签 - 它定义了 HTML 文档中的嵌入对象。可用于 HTML 文件和多媒体内容，如音频、视频、小程序、ActiveX、PDF 和 Flash 或其他插件。

   <object data="http://stackoverflow.com" width="400" height="300" type="text/html">
        Alternative Content
    </object>

<embed> 标记 - 它为外部应用程序（例如插件）定义了一个容器，也可以被“破解”并用于显示 HTML 页面。

<embed src="http://stackoverflow.com" width=200 height=200 />

关于传递 HEADER 最好的解决方案是使用 AJAX 方法，这里是一个示例：

$.ajax({
    url: "http://stackoverflow.com",
    data: { uname: "test" },
    type: "GET",
    beforeSend: function(xhr){xhr.setRequestHeader('X-TOKEN', 'xxxxx');},
    success: function() { alert('Success!' + authHeader); }
});

或者这样，

$.ajax({
    url: "http://stackoverflow.com",
    data: { uname: "test" },
    type: "GET",
    headers:{ "X-TOKEN": 'xxxxx'},

【讨论】：