HTMLだけでフォームに入力されたIDをIframeのsrcに代入する方法がわからない

実現したいこと

HTMLだけでフォームに入力されたIDをIframeのsrcに代入する方法を教えてください

発生している問題・分からないこと

・formに入力されたIDをifarmeのsrcに代入できない
-接続が拒否される

該当のソースコード

Html
1<HTML lang="ja-JP">
2	<head>
3		<meta charset="UTF-8"/>
4		<title>Youtube player</title>
5	</head>
6	<body>
7		<form action="" method="get" Class="form1">
8			<div class="form1">
9				<label for="text1">Youtubeの動画ID:</label>
10				<input type="text" id="text1" name="text1"/>
11			</div>
12			<div class="form1">
13				<input type="submit" value="Go!"/>
14			</div>
15		</form>
16	<iframe src="https://www.youtube.com/watch?v="+text1/>
17	</body>
18</HTML>

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

mdn web docs等を見たりしてformには入力できるようになったがうまく代入されず接続が拒否される

補足

実行環境：chrome 125.0.6422.142
エディタ：Notepad++

juner

2024/06/08 16:04

form自身が内包するのは自身のaction にクエリをつけたりして遷移するだけではないでしょうか? どこに iframeを操作する能力があるのでしょうか？

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

回答1件

formのaction属性を https://www.youtube.com/watch に、target属性を追加、inputのname属性をvに、iframeのname属性をformのtarget属性と同じ値にします。

html
1		<form action="https://www.youtube.com/watch" method="get" Class="form1" target="ytframe">
2          ....
3				<input type="text" id="text1" name="v"/>
4          ....
5		</form>
6	<iframe name="ytframe" />

だたし、https://www.youtube.com/watch のアドレスはサーバ側で iframe 埋込を許可していない可能性があります。iframe 埋め込みを許可している共有用のアドレス( www.youtube.com/embed/... )だと JavaScript なしでは無理だと思います。

投稿2024/06/08 16:42

編集2024/06/08 22:08