すべて、 私が所有する外部コンテンツをiframeなしの新しいアプリケーションに埋め込む必要があります。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を自分の現在のページとコンテンツに埋め込むことができるようにしたいと思います。自分のコンテナにドラッグ＆ドロップを保持します。
今私には2つの選択肢があります。特定の項目の選択を忘れると、アプリケーション全体の読み込みが試行されました。
オプション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で置き換える必要があります。
ご覧のとおり、多くの可動部分があります。これらのdivの機能を維持しながら、特定のDIVを別のページから鉱山、iframe、およびiframeに埋め込む最良の方法は何でしょうか。
あなたは 'object'要素を試しましたか？ ...埋め込みの詳細はこちらをご覧ください：https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies – LGSon
申し訳ありませんが、私はオブジェクトを試したことを言いました。これは読み込み後も消えています – user3780616