div の内容を新しい iframe にコピーします
P粉042455250
2023-08-17 17:03:59
<p>最終的には、特定の <code>div</code> を出力する手法を試していますが、質問のこの部分で行き詰まっています。 </p>
<p><code>div</code> から新しい <code>iframe</code> にコピーする必要があるコードがあります。 </p>
<pre class="brush:js;toolbar:false;">var iframe = document.createElement('iframe');
var div = document.querySelector('div#sidebar');
var content = div.innerHTML;
iframe.srcdoc = `<!DOCTYPE html><html><head></head><body>${content}</body></html>`;
document.body.append(iframe);
iframe.contentWindow.print();
</pre>
<p>SO ページの開発者ツールでこれを試してみました (<code>div#sidebar</code> を使用して試すことができました)。 </p>
<p>これを機能させるには、ドキュメントに <code>iframe</code> を追加する必要があることに気付きました。それ以外の場合、<code>.contentWindow</code> プロパティは <code>null</code> になります。 </p>
<p>コードはある程度機能しているようですが、<code>iframe</code> は空であるか、空のようです。最終的な印刷出力は空白になります。 </p>
<p>コピーしたコンテンツを使用して新しい <code>iframe</code> を作成する際のヒントはありますか? </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
わかりました、答えはあります。似たようなトピックを教え終えたばかりなので、もっとよく知っているはずです。
コードは有効ですが、実行が早すぎます。ドキュメントの読み込みが完了するまで待つ必要があります。
これは動作バージョンです:
リーリー