HTMLページの残りの部分とは独立してコードを実行します... iframe？

Question

これは説明するのが少し難しいです。私は他のウェブページがどのようにレンダリングされるかを示すウェブページを作成しています。ここに私が持っている問題の簡略化されたバージョンがあります...

<div id="test">This is an example of page 1</div> 

<div id="test">This is an example of page 2</div> 

ご覧のとおり、両方のdivは同じIDを持っています。私の状況でIDを変更することはできず、問題を引き起こしています。私は様々な他のCSSやJavaScriptの問題も抱えています。コードの各セクションは、他のセクションと競合しています。そこで、セクションを他のすべてとは独立してレンダリングする方法を探していました。これを行う1つの方法は、コードの各セクションにiframeを作成することです。しかし、それは私がセクションごとに別々のWebページを作成する必要があります。または、URLではなく、コードを入力するだけでiframeが機能する方法があります。

Answer 1

HTML文書では、1要素につき1つのIDしか持つことができません。したがって、各部門は異なるIDを持っていなければなりません。そうでなければはになります。複数の要素が同じ名前を持つ必要がある場合は、クラス<div class="test" id="unique-id"></div>、次に<div class="test" id="another-id"></div>を使用できます。

iframeに関して質問に答えるには、はい、各iframeごとに別のページが必要です。 iframeタグ内にコードを記述して別々に実行することはできません。 iframe specを参照してください。

編集：iframe仕様書を読んだら、srcdoc属性を使用してsrc属性に上書きすることができますが、this isn't entirely accepted across browsersのように見えます。 MDN has more information about the attribute.