自分のサイトに埋め込んだツイキャスのライブ画面を切り替える [その他]
教えて!gooで次の質問をしたけれど、回答が得られる前にある程度解決してしまった。回答が全くない場合は削除されてしまうので、こちらに質問と自己解決した答えをメモしておく。
自分のサイトに埋め込んだツイキャスのライブ画面を切り替える
質問者：いしい 質問日時：2016/11/22 16:41 回答数：0件
「インターネット・Webサービス > 動画サービス > ツイキャス」で質問したのですが、
回答が得られなかったので削除して、カテゴリーと文章を変えて質問しました。
ツイキャスのライブ画面を自分のサイトに埋め込むには、例えば次のように記述すれば良いのですが、
<script type="text/javascript" src="http://twitcasting.tv/twitcasting_jp/embed/live-320-0"></script>
このtwitterユーザー名（上の例では「twitcasting_jp」）の部分を自分のサイトで切り替えたいと思っています。
例えば添付画像では下の入力欄にtwitterユーザー名（例えば「twitcasting_jp」）を入力して
「変更」ボタンをクリックしたら上のボックスにライブ画像が表示されるようにしたいと思っています。
試しに次のようなソースを作ってみたのですが、何も表示されません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ツイキャス切り替え</title>
<script type="text/javascript">
<!--
function newsrc() {
var url = "http://twitcasting.tv/" +document.cas.casid.value+ "/embed/live-320-0";
document.getElementById("twitcasting").src = url;
}
// -->
</script>
</head>
<body>
<div style="width:350px;height:200px;border:1px solid" id="twitcasting_div">
<script type="text/javascript" src="" id="twitcasting"></script>
</div>
<form id="cas" name="cas">
<input type="text" value="" id="casid" name="casid">
<button class="click" onclick="newsrc(); return false;">変更</button>
</form>
</body>
</html>
scriptを次のように変えてみましたが、やはり表示されませんでした。
<script type="text/javascript">
<!--
function newsrc() {
var url = "http://twitcasting.tv/" +document.cas.casid.value+ "/embed/live-320-0";
newHTML = '<script type="text/javascript" src="'+url+'"></script>';
document.getElementById("twitcasting_div").innerHTML = newHTML;
}
// -->
</script>
scriptを次のように変更すると新しいタブでライブ画面が表示されることは確認しています。
<script type="text/javascript">
<!--
function newsrc() {
var url = "http://twitcasting.tv/" +document.cas.casid.value+ "/embed/live-320-0";
newHTML = '<script type="text/javascript" src="'+url+'"></script>';
newWin = window.open("about:blank","_blank");
newWin.document.open();
newWin.document.write(newHTML);
newWin.document.close();
}
// -->
</script>
しかし、document.writeは使わない方が良いそうですし、同じタブに開きたいです。
どのようにしたら良いか教えていただければ幸いです。
質問者からの補足コメント
報告です。
scriptを入れるdivをiframeに変えて、functionを次のように変えたら成功しました。
function newsrc() {
var url = "http://twitcasting.tv/" +document.cas.casid.value+ "/embed/live-320-0";
var newHTML = '<script type="text/javascript" src="'+url+'"></script>';
twitcasting_div.contentWindow.document.open();
twitcasting_div.contentWindow.document.write(newHTML);
twitcasting_div.contentWindow.document.close();
}
質問者からの補足コメント
先の補足コメントの方法では、Firefox50.0では動作しましたがIE11ではダメでした。
twitcasting_div.contentWindow.document.open();
の所で
「未定義または NULL 参照のプロパティ 'document' は取得できません」というエラーになります。
この問題の改善方法も併せて教えていただければ幸いです。
また、引き続き、document.writeを使わない方法を知りたいと思っています。
質問者からの補足コメント
上の報告のnewsrc()を次のように変えたらIE11でも動作しました。
function newsrc() {
var url = "http://twitcasting.tv/" +document.cas.casid.value+ "/embed/live-320-0";
var newHTML = '<script type="text/javascript" src="'+url+'"></script>';
var iframe = document.getElementById("twitcasting_div");
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(newHTML);
iframe.contentWindow.document.close();
}
Amazonで買い物をする
ピックアップ
当事者が語る精神障害とのつきあい方「グッドラック！統合失調症」と言おう
Amazonリンク（連ドラ）
Amazonリンク（連ドラ）
Amazonリンク（連ドラ）
Amazonリンク（連ドラ）
Amazonリンク（連ドラ）
Amazonリンク（連ドラ）
Amazonリンク（連ドラ）
Amazonリンク（その他）
