2017-01-05 9 views
0

私は、ユーザーがウィジェットのいくつかのオプションを選択し、それらのオプションに基づいてサンプルHTMLを動的に生成できるWebページを持っています。 HTMLはページのdivに入れられているので、ユーザーは見た目を見て自分のサイトにコピー/貼り付けることができます。javascriptを使用してdiv内のHTMLから新しいWebページを作成できますか?

新しいウィンドウで開き、divのサンプルHTMLが追加されていますので、この例をすぐに見られるようにしたいと考えています。

javascript/jqueryでこれを行う方法はありますか?

+0

フルヘッダー(ヘッダーとHTMLタグを含む)の場合はiframeを使用する必要があります。そうでなければjQueryで十分でしょう – Yaser

+0

はい、可能です。既に試したことを示すコードはありますか? –

+0

完全なHTMLです。 iframeはどのように動作するか見ることができますが、私は理想的には新しいウィンドウでそれを望みます。新しいウィンドウに入ったらどこから始めたらいいのかわからないのでコードはありません(既存のウィンドウでdocument.writeで簡単にやりとりできますが、それは役に立ちません)。 –

答えて

2

実際にはwindow.openメソッドを使用して、開いているウィンドウへの参照を保存してから書き込むことができます。

https://developer.mozilla.org/en-US/docs/Web/API/Window/open

var exampleWin = window.open("", "example"); 
var docMarkup = "<!doctype html><html><head><title>test</title></head>" + 
"<body><p>Hello, world.</p></body></html>"; 
exampleWin.document.write(docMarkup); 
// later you can also do exampleWin.close() if you wish 

ブラウザの開発ツールのコンソールで上記のコードを貼り付けてみてください。

+0

それは私が欲しかったものです!ありがとう:) –

+0

興味深いことに、私は停止するまで、ブラウザのシンボルが新しいウィンドウで回転し続けていることに気付きました。リフレッシュすると、それ自体が停止します。それがなぜ起こっているのでしょうか? –

+0

私は今、プロダクションにコードをアップロードしていますので、終わりのない読み込みをhttps://www.palfed.com/make-wizardで確認できます。下にスクロールして「view」をクリックするだけです。 "選択されたオプションで動作するHTMLの例"の横にある –

0

最終目標を達成する通常の方法は、少し違った方法で動作します。あなたは/code(または同様のもの)にGETリクエストをリッスンしているWebサーバーを持っており、クエリー文字列に基づいて適切なHTMLを構成して応答します。たとえば、/code?color=blueをリクエストできます。

ドキュメントを作成することは、ウェブサーバーが行うように設計されています。このアプローチでは、キャッシングポリシーを活用して、より広範なユーザー認証と承認システムなどと統合することができます。

ユーザーにソースコードを表示するには、単にfetch()のURLを入力し、内容を<code>タグに入れます。レンダリングされたウィジェットを表示するには、<iframe>srcは同じURL)を使用します。

iframeを使用する代わりに、open()というURLを新しいウィンドウにしたい場合は、しかし、ポップアップブロッカーには注意してください。

関連する問題