javascript - 用html加载html代码

Question

我希望 javascript 加载一个 html 代码，以便它可以嵌入到页面中，我得到的只是未经编译的原始 html 代码。

<script>
document.write('http://www.example.com/index.php?title=Media:Object4&action=raw&ctype=html')
</script>

它包含里面的 html 编码，我希望它嵌入到页面中，以便我可以与其他网站共享。

Answer 1

您是否尝试从该 URL 获取 HTML 并将其嵌入到页面中？出于安全原因，JavaScript 不能这样做，但如果您使用的是 PHP 服务器端，则可以使用：

echo file_get_contents("http://..........");

或者您可以使用 iframe：

<iframe src="http://........" />

Answer 2

document.write - 将文本添加到文档中 - 它不会从 Web 获取文档。

但是，您可以使用object 标签。

它应该看起来像这样：

<object type="text/html" data="http://www.example.com/index.php?title=Media:Object4&action=raw&ctype=html" style="width:100%; height:100%"></object>

此外，如果您要获取的页面在同一个域中，您可以使用AJAX来获取它。

Answer 3

完成这项工作的最简单方法是使用<iframe>：

<iframe src="http://www.example.com/index.php?title=Media:Object4&action=raw&ctype=html"></iframe>

如果要将其加载到特定容器中，则必须使用 JavaScript 执行 Web 请求；jQuery 示例：

<div id="container"></div>
<script>
    $('#container').load('http://www.example.com/index.php?title=Media:Object4&action=raw&ctype=html');
</script>

如果远程 URL 不在同一个域中，则需要使用代理：

<script>
    $('#container').load('/path/to/myproxy.php', {
        url: 'http://www.example.com/index.php?title=Media:Object4&action=raw&ctype=html'
    });
</script>

然后您的 PHP 代码可能如下所示：

<?php

if (parse_url($_POST['url'], PHP_URL_HOST) === 'www.example.com') {
    echo file_get_contents($_POST['url']);
}