嵌入没有 iframe 的外部内容答案

【问题标题】：Embed external content without iframe嵌入没有 iframe 的外部内容
【发布时间】：2017-05-30 01:29:14
【问题描述】：

所有，我有一个要求，我需要将我们拥有的外部内容嵌入到没有 iframe 的新应用程序中。

此要求很快变得复杂。想象一下下面的模拟代码作为我需要嵌入的内容。

<html>
<head>
<script src="js/someScript1.js"></script> <!-- drag and drop -->
<script src="js/someScript2.js"></script> <!-- ajax communication -->
<script src="js/someScript3.js"></script> <!-- ux stuff -->
</head>
<body>
<div id="appContainer">
  <table>
    <tr>
      <td>
        <div id="toolbar">
          Toolbar that interacts with both draggablePicklist and content
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="dragablePicklist">
          Unordered list of elements that can be dragged into content
        </div>
      </td>
      <td>
        <div id="content">
          Content area where things are built based on items dragged in from dragablePicklist
        </div>
      </td>
    </tr>
  </table>
</div>
</body>
</html>

根应用程序是一个 JavaEE 应用程序，最终以 javascript 为客户端构建。问题是这是一个大型产品，为客户端应用程序编写了数十万行 javascript。其中几乎没有相关的文档。

以上述模拟 HTML 为例，我的要求是能够在我的应用中挑选我想要的选择器，同时保留上下文和功能。

例子：

我可以将内容从 draggablePicklist 拖到内容中，然后 javascript 构建一个视图。

我希望能够将 draggablePicklist 嵌入到我的当前页面以及内容中，在它们自己的容器中，但保留我的拖放操作。

现在我有两个选择。忘记选择特定项目，我只是尝试加载整个应用程序。

选项 1

<script>$("#testLoad").load("http://www.domain.com/myapp");</script>
<div id="testLoad"></div>

但是画布在我看到它加载后立即消失了。

选项 2

var jqxhr = $.get( "http://www.domain.com/myapp", function() {
})
  .done(function(d) {
    console.log( "second success" );
    $('#test').html(d);
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
  });

jqxhr.always(function(d) {
  console.log( "second finished" );
});

这看起来可能会起作用，但我需要在此页面中包含 javascript“myapp”依赖。我还需要用绝对 url 查找和替换所有 href。

如您所见，有很多活动部件。将来自另一个页面的特定 DIV 嵌入到我的页面中的最佳方法是什么，而不使用 iframe 同时维护这些 div 的功能。

【问题讨论】：

你试过object元素吗？ ...在此处阅读有关嵌入的更多信息：developer.mozilla.org/en-US/docs/Learn/HTML/…
对不起，我忘了说我试过对象。加载后这也在我身上消失了

标签： javascript jquery html iframe embed

【解决方案1】：

这就是我能够嵌入整个应用程序的方式。

$(document).ready(function() {
  $("html").html('<object data="http://www.domain.com/myapp">');
});

现在我需要弄清楚如何使用上述方法选择此应用程序的特定部分。所以这已经解决了 50%。

【讨论】：

你能弄清楚如何选择一个 dom 对象吗？