如何加载外部 HTML 文件

Question

我有一些 HTML 如下：

Select a file : <input type="file"><br><br>
Html Codes : <textarea id="displayHtml"></textarea><br><br>
<div id="displayPage">Display the Html Page here</div>

现在我如何从本地硬盘浏览外部 HTML 文件并在 div 中显示页面预览#displayPage并将文件的 HTML 标签放入文本区域#displayHtml？我不知道该怎么做，所以请帮忙。

我的小提琴在这里：https ://jsfiddle.net/zm6ga2ev/1/

Answer 1

您只需将.load其他页面内容放入您的 div 中即可。

//Load full document
$('#displayPage').load('http://same-domain.com/next-page.html');

// You can use any CSS selector to load only part of page
$('#displayPage').load('http://same-domain.com/next-page.html #some-inner-id > *');

如果#displayPage在 DOM 中找不到元素，则不会执行任何请求！如果#some-inner-id在请求页面 DOM 中找不到，那么您会得到空内容。

笔记

加载的页面必须允许跨源请求（通常意味着同一域请求）。请在此处查找跨源请求。