使用 javascript 从外部页面获取 html 元素

Question

我正在尝试在 javascript 中创建一个函数，它将创建一个视频 html 元素，并通过从另一个网页检索源元素来获取源

我已经看到其他问题的答案使用 jquery 或一些 ajax 东西，但没有人真正解释自己，所以我所能做的就是将他们所说的内容复制并粘贴到我的页面中，并得到一个错误，说“$”未定义（如果你不知道，我对 javascript 还是很陌生。还没有使用任何 ajax 或 jquery）。

function loadSource(url){
    var vid = document.getElementById("vid");
    var src = <get source element with id "mp4Source" from the specified url>
    vid.appendChild(src);
}

Answer 1

您将$ 设为未定义的原因是您尚未添加 JQuery 库。

有一个很好的问题解释了如何设置here

在您的 JavaScript 之上，您需要包含 JQuery 库。

如何包含 JQuery 库的示例

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

至于加载外部视频元素，您需要向包含该元素的 URL 发出 AJAX 请求。 AJAX 是一种执行异步 HTTP 请求的方法，例如在不刷新网页的情况下向 URL 发出的请求。

如何使用 AJAX 从外部 URL 提取 HTML 的示例

function loadSource(url){
    $.ajax({
        url: "<URL containing the HTML>",
    })
    .done(function(html) {
        $("#vid").append(html); // append the html to the element with the ID 'vid'
    });
}

有关 AJAX 的更多信息，请访问http://api.jquery.com/jquery.ajax/

您还应该了解 JQuery 的基础知识，例如查看 here。如何在您的代码中使用它的一个示例是将 document.getElementById("vid") 替换为 $("#vid")。