Question

全部，我有一个要求，我需要将我们拥有的外部内容嵌入到没有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的功能。

Answer 1

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

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

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

在没有iframe的情况下嵌入外部内容

1 个答案: