connecting...
Google translation for articles :
4 NEMBER donated to you!!

セレクトボックスによって表示を変えるiframe

nem49.25xem (4) 501 12 2

Nemlogで作ったセレクトボックスと連携してiframeの中身を変えたい。

イメージこんな感じ

参考:https://nemlog.nem.social/blog/19668

 

https://stackoverflow.com/questions/20505039/change-iframe-src-onchange-of-dropdown-value/20505102

上記のStackoverflowに全部書いてある。

つまりselectのonchangeの内容を

document.getElementById('youriframe').src = this.options[this.selectedIndex].value

とするだけ。

youriframeの部分にはiframeのIDを入れる。

ついでにstyleで見た目を整えれば、完成。

 

ね?簡単でしょ??

 

ex)idをframeとした場合(sandboxの部分はいらないよ)

<iframe sandbox id="frame" style="width: 768px; height: 600px;" src="#">

Why don't you get crypt currency 'nem' by posting your blog article?

nemlog is blog posting service which has donation feature by crypt currency nem.
nemlog was launched to create environment which can be donated nem among NEMbers via blog articles.
Let's get nem by posting good blogs.

Nem prize event is being held frequently, Please join us on this opportunity!

nemlog registration from here
Register
Comments from NEMber
DAFU@Nemlog-UF
2019-04-06 16:13:06ID:97448

>>ほなねむ::さん
ありがとうございます(´▽`)
>>エヌ::さん
あー
最初それでやろうとして動かなかったのでonchangeイベント使いましたw

エヌ
2019-04-06 09:47:55ID:97297

>>dafu::さん

記事の編集画面上では画像もスクリプトも全部動いているのを見ると、こっち側ではそもそものnemlogに設置されてあるものと競合しちゃうのか、どうともっぽいっすねー。iframe上で飛ぶプロフィールページのリンク画像だけは何故か配置されますw

試しに下記みたいな普通のiframeの使い方でもやってみましたけど、もちろん無理でしたw

<ul>
<li>
<a href="https://nemlog.nem.social/blog/14435" target="enu">Bulma</a>
</li>
<li>
<a href="https://nemlog.nem.social/blog/19268" target="enu">nemlog-TOC</a>
</li>
</ul>
<iframe src="https://nemlog.nem.social/blog/19268" name="enu" width="100%" height="1000"></iframe>

ほなねむ.nem
2019-04-06 00:54:39ID:97200

すごいうぇーい(๑•̀ㅂ•́)و✧
すごいうぇーい(๑•̀ㅂ•́)و✧
参考にします!

DAFU@Nemlog-UF
2019-04-06 00:15:03ID:97173

>>エヌ::さん

色々調べたけどこっち側ではどうともなのかな??

普段iframeを使う時はウィジェットとして用意されたものを使うから自分でiframe書こうとすると知識が意外と無かった( ´◔ ‸◔`)

エヌ
2019-04-05 23:49:54ID:97135

>>dafu::さん
なるほどー・・・!!?(←よく分かってない)
自分でも色々試してみたんですが、どうやっても画像ごとインラインフレーム内に引っ張れなかったですw
こちらの手法は色々と使えそうなので、使う場面模索していきます!!
楽しくてとても勉強になる記事をありがとうございましたー!!

DAFU@Nemlog-UF
2019-04-05 23:47:10ID:97131

こうして作ったあとだとHTML5で追加されたDetailsタグ使う方が綺麗になりそうに思えてきた...

あしたそっち編も書こ(*´ω`*)

DAFU@Nemlog-UF
2019-04-05 23:36:32ID:97125

>>エヌ::さん
画像切れてるのは外部リソース(AWS S3)だからだと思います

sandboxの仕様は分からないけど、スクリプト系は使えないので難しい気がします

エヌ
2019-04-05 23:25:20ID:97112

おぉー!これ、おもろっすねー!!
これ、画像のリンク切れてるのってなんでしょうかね?ワシの記事の直リンクのものだけは生きてるけど。
sandboxに"allow-scripts"でスクリプト実行許可とかで画像引っ張れたりするんですかね?

やそ
2019-04-05 22:22:40ID:97048

ウィジェットの投げneMboxはiflame内ですけど、
だからといってできるもんじゃ無いんですねー。なるほどありがとうございました。

DAFU@Nemlog-UF
2019-04-05 21:40:58ID:97010

>>やそ::さん
その人のprofileアクセスしてjqueryで要素取得して...

厳しいかな( ´◔ ‸◔`)

NEMber who posted this article

もしかしたら染色体がXYだったかもしれないJK。
Nemlog-UFという拡張機能の開発者。
また、ZNYに関してはFaucet(https://bitzeny.ml)も運営していた(現在廃止)。
19698
0

Why don't you read following articles?