iframe 内のコードが無視される　深刻な問題の原因は？

症状
下記のコードを実行していただけますでしょうか。
iframe　内部のコードが実行されずに作動停止してしまいます。

目に見える症状
表示させたボタンを押しても、何も作動せず
.

コード実行後の console 上でのエラー表示内容
'
Uncaught ReferenceError: buttonD is not defined
onclick about:blank:1

注：
すなわち、browser は、新たに書き加えられた iframe 内の HTML構文を
file name = "blank" という扱いにしていることが分かります
.

iframe 内容を、親ページと異なる別の HTML file として読み込ませない理由

背景事情の説明が必要と思われます

下記のコードからお分かりいただけますよう、この事例では　
iframe 内容を　script から書き出させています。

その理由として、

iframe 内のエレメントに親ページから読み書きをすることが
最近の cross domain 問題のおかげで阻害されるようになってしまいました。

代替策として、frame 内容を子供ページとして読み込ませる代わりに
親ページ内部から、append させる方法を知りました。

問題点
createElement + appendChild で iframe 内の子供ページを作ると
frame 内部に script を正常に実行できる環境が存在しないこと
.

問題が、質問者のコード作成内容の誤りによらないことの裏づけ

以下のコードで、
親ページから生成されたフレームページ内の
ボタン操作が実行できずエラーとなってしまいますが、

その同じフレーム内のコードを、単独の HTML ファイルとして表示させると、
問題なくボタン操作が実行されることから、
iframe を親ページから書き出す方法では、かなり制約が大きいことが裏付けられます。
.

質問内容とは

iframe 内部でボタン操作を実行させながら、親ページとの情報のやり取りを可能にさせることができるような、frame 内ファイルの作り方が全く分かりません。

問題のコード　事例

html
1<!DOCTYPE html>
2<html>
3<meta charset="UTF-8">
4<head>
5<script src= "frameCreate002.js" ></script>
6</head>
7
8<body>
9    <button onclick="appendHTML()" >write</button>
10
11    <br><br>
12
13<iframe id="frame01"  >
14</iframe>
15
16</body>
17</html>

javascript
1// file name: frameCreate002.js  //
2
3function appendHTML()
4{
5    var frameCode = document.getElementById( "frame01" ).contentDocument;
6
7    var container = frameCode.createElement( "div" ) ;
8
9container.innerHTML = 
10'<!DOCTYPE html><html><body><script> function buttonD() {  alert( "hello world" ); } </script> <button  onClick= "buttonD()" >click me </button></body></html>' ;
11
12    frameCode.body.appendChild( container );
13}