Question

我想创建生成html代码的应用程序。这是什么意思？我认为这里的例子最好。我在我的网站上创建了一些html samles。我想让用户在他/她的网站上显示这些样本。例如，用户复制一些链接：

<script scr='some/path'></script>

如果他将此脚本粘贴到他的网站上，那么我编译的html代码将显示在他的网站上。我的问题是如何最有效地做到这一点？我从未做过这样的事情。也许你可以给我一些概念，帮助我的工具。我看到过去，开发者用iframe解决了这些问题。但我认为这不是完美的解决方案。

Answer 1

如果您希望所有内容完全符合您的需求，那么没有比iframe更好的解决方案了。

问题在于，如果您使用其他解决方案（例如，使用您网站上的脚本），那么您的CSS＆amp; JavaScript可能与页面的其余部分冲突，例如：

字体很可能会混乱;
背景颜色，链接等也可能存在错误。

如果您真的想要这样做，那么您应该尝试在此处阅读：Embed an External Page Without an Iframe?

（我只是谷歌搜索＆＃34;嵌入HTML其他网站javascript＆＃34;。）

祝你好运！

Answer 2

我认为Eric Bidelman在他的文章＆＃34; HTML导入＆＃34;中得到了你需要的东西，点击下一个链接：

http://www.html5rocks.com/en/tutorials/webcomponents/imports/

通过声明：

在您的网页上加入导入

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>

导入的URL称为导入位置。要从其他域加载内容，导入位置需要启用CORS：

<!-- Resources on other origins must be CORS-enabled. -->
<link rel="import" href="http://example.com/elements.html">

要检测支持，请检查元素上是否存在.import：

function supportsImports() {
  return 'import' in document.createElement('link');
}

if (supportsImports()) {
  // Good to go!
} else {
  // Use other libraries/require systems to load files.
}

浏览器支持仍处于早期阶段。 Chrome 31是第一个看到实现的浏览器。从那时起，Chrome 36就更新了最新的规格。您可以通过启用Chrome Canary中about：flags中的启用实验性Web平台功能来启用该标记。对于其他浏览器，Polymer的polyfill非常有效，直到得到广泛支持。

显示外部网站的HTML

2 个答案: