JavaScript iframe内のobjectをiframeの外に置く

タイトルの通りです
iframeの中にある関数を実行できる状態でボタンをiframeの外に出すという事は可能でしょうか
下記ソースだと中にあるものを外に出せましたが、中の関数とは連携されていない為、
関数を実行できません
ご存知の方教えて下さい

iframe内にあるobjectを外へ持っていくという(ただ見た目的に移動するだけでiframe内部にあるのと変わらない状態にしたい)

こうしたら一応関数を実行できましたが、これ以外の方法であれば教えてください
<input id="btn" type="button" value="ボタン" onclick="document.getElementById('iframe').contentWindow.a()">

a.php(iframe外)

<div id="b"></div>
<br>
<br>
<br>
<script>
window.onload=function(){
aaaa = document.getElementById("b").parentNode;
aaaa.insertBefore(document.getElementById("iframe").contentWindow.document.getElementById("btn"),aaaa.firstElementChild);
}
</script>
<iframe src="b.php" id="iframe"></iframe>

b.php(iframe内)

<script>
function a(){
alert("これを呼び出せる状態で動かすにはどうしたらいいか");
}
</script>
<input id="btn" type="button" value="ボタン" onclick="a()">

m.ts10806

2020/12/18 13:44

>こうしたら一応関数を実行できましたができたなら、それでいいのではと個人的には思います。「iframe」というIDは紛らわしいのでよろしくはないと思いますが。

退会済みユーザー

2020/12/18 13:46

これが10個、20個あった場合に、それぞれ個別に対応するということは望ましくないので、そのまんまの状態で移動できる方法はあるのかお聞きしたいのですが

maisumakun

2020/12/21 02:07

> これが10個、20個あった場合「これ」とは<iframe>でしょうか、ボタンでしょうか、それともその両方でしょうか？現状ではそれすらわかりません。

退会済みユーザー

2020/12/21 02:16

恐らく言ってることがわからない、わかったとして、私のこれ以外といったやり方よりももっと賢い処理を思い付かれると思います私の投稿の本意は手をかけず、処理ができるのかといった単純なものです色々とありがとうございました

maisumakun

2020/12/21 02:22

> 私の投稿の本意は手をかけず、処理ができるのかといった単純なものです残念ながら、全く単純なものではありません。「元のコードを変えず」というのは、かなり強い条件になってしまいます。

行動規範の内容に同意します

回答2件

document.adoptNode()という、異なるdocument間でエレメントを移管するメソッドは存在します（MDN）。

ただし、addEventListenerしたJavaScriptイベントはコピーされませんし、onclickで書いたJavaScriptコードも新しいdocument内で再解釈されるだけになりますので、「元の<iframe>内のコードを呼ぶままボタンをコピーする」ことはできません。

投稿2020/12/21 02:17

maisumakun

総合スコア145975

ベストアンサー

こういう感じではどうでしょうか。

iframeのガワ（外）

HTML
1<body>
2<script>
3childFunctions = [];  // 子フレームの関数を保存する配列
4function setChildFunction(name, fn) { // iframeの中から呼び出されて関数テーブルをセットする
5    childFunctions[name] = fn;
6}
7</script>
8<input type="button" value="ボタン1" onclick="childFunctions.x1()"><br>
9<input type="button" value="ボタン2" onclick="childFunctions.x2()"><br>
10<input type="button" value="ボタン3" onclick="childFunctions.x3()"><br>
11<iframe src="child.html" id="iframe"></iframe>
12</body>

iframeの内(child.html)

HTML
1<body>
2<div id="c"></div>
3<script>
4parent.setChildFunction('x1', function() {  // 親のsetChildFunction を呼び出す
5  document.getElementById('c').textContent = 'x1';
6});
7parent.setChildFunction('x2', function() {
8  document.getElementById('c').textContent = 'x2';
9});
10parent.setChildFunction('x3', function() {
11  document.getElementById('c').textContent = 'x3';
12});
13</script>
14</body>

（追記 2020/12/21）

以下ではどうでしょうか? 関数とボタンの両方をiframeの外に持ち出しました。内側のボタンとJavaScriptは、なくても動きます。

iframeのガワ（外）

HTML
1<body>
2<script>
3function b1() {
4  // 関数 c1 をiframeの外側に持ち出した
5  // iframeの document取り出し
6  var childDoc = document.getElementById('iframe').contentDocument;
7  // iframe内のDOM操作
8  childDoc.getElementById('c').textContent = 'b1';
9}
10</script>
11<input type="button" value="ボタン1" onclick="b1()"><br> <!-- 外側のボタン -->
12<iframe src="child.html" id="iframe"></iframe>
13</body>

iframeの内(child.html)

HTML
1<body>
2<input type="button" value="ボタン1" onclick="c1()"/><br> <!-- 内側のボタン -->
3<script>
4function c1() {
5  // iframe内のDOM操作
6  document.getElementById('c').textContent = 'c1';
7}
8</script>
9<div id="c"></div>
10</script>
11</body>

（追記 2020/12/21 12:40）
コメント見ました。
iframeの内側のボタンのみを複製するスクリプトを書いてみました。JavaScriptを外側に移すとなるとオオゴトだと思います（プロパティも変更しないといけない）ので、それはやっていません。

iframeのガワ（外）

HTML
1<body>
2<div id="b"></div>
3<script>
4function importButton(bName) {  // ボタンを複製して配置。bName はボタンのID
5  const oldNode = document.querySelector("iframe").contentWindow.document.getElementById(bName);
6  const newNode = document.importNode(oldNode, true); // 複製ノードを作る
7  newNode.onclick = oldNode.onclick; // onclickイベントをコピーする
8  oldNode.style.display ="none"; // iframe内の元のボタンは非表示にする
9  pNode = document.getElementById("b").parentNode;
10  pNode.insertBefore(newNode, pNode.firstElementChild);  // 複製したノードをインサートする
11}
12window.onload=function(){
13  importButton('btn_b');
14  importButton('btn_a');
15}
16</script>
17<iframe src="311122c.html" id="iframe"></iframe>
18</body>

iframeの内(child.html)

HTML
1<body>
2<script>
3function a(){
4  alert("フレーム内のalert(a)");
5}
6function b(){
7  alert("フレーム内のalert(b)");
8}
9</script>
10<input id="btn_a" type="button" value="ボタン(btn-a)" onclick="a()">
11<input id="btn_b" type="button" value="ボタン(btn-b)" onclick="b()">
12</body>

投稿2020/12/19 01:03

編集2020/12/21 03:50

ockeghem

総合スコア11705

退会済みユーザー

2020/12/20 12:35

言葉足らずですみません iframeの中であれこれ操作するのではなく、外側から中身を実行できる状態で外側に持ってきたかったのですが、中々説明が難しくすみません内側には何の仕掛けもせず、外側から内側の関数を実行できる状態で外側に移動するには、という事です

ockeghem

2020/12/20 12:53

関数の実体は外ですか、中ですか? 外だと、DOM操作で外からiframeの中をいじるだけになりますから、関数の実体はiframeの中にあるという理解で大丈夫ですか? だとすると、今でも関数の実体はiframeの中ですが、関数を呼び出す仕組みはiframeの中に（も）ある今の状態が好ましくなく、関数を呼び出す仕組みは外側だけにある、という意味ですか? 「外側に移動する」の意味がわからないです

退会済みユーザー

2020/12/20 22:39

関数の実行は必ず移動と別にしなければならないわけですね私は移動＝関数を実行できる状態で外側にもっていきたかったのですが。内側に <input type="button" value="" onclick="a()"> があったとしたら、上記を外に移動させることはできましたが、外側にa()がないので、内側のa()を呼び出せません外から内側にあるものを実行することは、 ockeghem氏の書いたものでも、document.getElementById('iframe').contentWindow.a()でも可能ですそれを省く意味で何の仕掛けもせずそのまま外側に持っていけないかと考えたのですが。私の考えたやり方は、クローンを作成しようが何しようが、無理だと判断しました。お手数お掛けし申し訳ございませんでした

退会済みユーザー

2020/12/21 02:00

追記見ました私の考えてることとズレが生じているようです child.htmlの<input type="button" value="ボタン1" onclick="c1()"/> これをまず、iframeのガワ（外）に持っていく処理がいります持っていくというのは謎でしょうか？ child.htmlからiframeのガワ（外）へ移動、もしくは複製する処理ですそののちに、c1()を呼び出すわけですが、この呼び出し方にchild.html内に操作を加えることなく、呼び出せる方法はないのか？という事なのですが。。。

退会済みユーザー

2020/12/21 02:05

もしかしたら何か方法はあるのかという疑問を持ちながら内心90%は無理だろうなと思いつつ投稿しましたもうそんなことできるかよで片づけてもらってかまいません色々試行錯誤を必要とするものではなく、単純にそのような関数は用意されてないのか、というレベルの質問でした

行動規範の内容に同意します

あなたの回答