htmlのWebコードにフラッシュファイルを埋め込むためのフラッシュ埋め込みhtmlソリューション（下）。
2022-01-16 03:26:29
私のSWFObject V1.5を使用した処理について
上記
もっと早くV2.1を知っていれば、quot;waiting for HTML DOM to load"の問題に悩まされることはなかったかもしれません。
まず、V2.1構文の呼び出し例について、簡単に説明します。
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
//1. Initialize variables, parameters, and properties using Json
var flashvars = {
name1: "hello",
name2: "world",
name3: "foobar"
};
var params = {
menu: "false"
};
var attributes = {
id: "dynamicContent2",
name: "dynamicContent2"
};
swfobject.embedSWF("test6_flashvars.swf", "content2", "300", "120", "6.0.0", " expressInstall.swf", flashvars, params, attributes);
//2. Traditional initialization settings, same effect
var flashvars = {};
flashvars.name1 = "hello";
flashvars.name2 = "world";
flashvars.name3 = "foobar";
var params = {};
params.menu = "false";
var attributes = {};
attributes.id = "dynamicContent3";
attributes.name = "dynamicContent3";
swfobject.embedSWF("test6_flashvars.swf", "content3", "300", "120", "6.0.0",
"expressInstall.swf", flashvars, params, attributes);
swfobject.embedSWF("test6_flashvars.swf", "content5", "300", "120",
"6.0.0", "expressInstall.swf", {name1:"hello",name2:"world",name3:"foobar"}, {menu: "false"}, {id:"dynamicContent5",name:"dynamicContent5"});
</script>
前の記事で採った解決策は、ほとんどのニーズを満たしているようですし、互換性も問題ないようなので、ほとんどの方のニーズを満たすことができるはずで、悪い解決策ではありません。しかし、私が発見したより極端なケースのひとつがあります。
new SWFObject("http://www.pec365.com/Flash/20071113.swf", "mymovie", "304", "367", "7" ;, "#FFFFFF");
もし、間違ったアドレスのFlashファイルを渡したり、Flashファイルがサーバーから削除されたりすると、次のような、最も望ましくない状況が発生します。
以下の通りです。
<html>
<title>DEMO</title>
<head>
<script type="text/javascript" src="swfobject_source.js"></script>
</head>
<body>
<form id="Form1">
<div id="flashcontent">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" border="0" />
</a>
</div>
</form>
<script type="text/javascript">
// Note that I prefixed the Flash file name with an f
var so = new SWFObject("http://www.pec365.com/Flash/f20071113.swf", "mymovie", "304", "367", " ;7", "#FFFFFF");
so.write("flashcontent");
</script>
</body>
</html>
このコードを自分で実行することをお勧めします。また、初めての方は、前の投稿で説明した手順を参照してコードを実行し、これから起こる "災害"を実際に感じてみてください。
はい、真っ白なページが表示され、Flashが表示されなかった時の画像が消えています、どこに行ったのでしょうか？デバッグしてわかったのですが、受信するFlashファイルのアドレスが間違っていても、エラー <object [......]></object> タグに <div id="flashcontent" ;>[......]が作成されるのです。 ]</div> 置換の内容では、このようにあなたが見るものです、高さと304pxと367pxの空白領域の幅を形成する（Flash Playerをインストールした場合、画面の左上隅にマウスの右ボタンをクリックして、あなたは何かを見つけるでしょう）、だから悪夢は、悪夢は来ています。
この悪夢のような結果を解決するために、だから私は悪いアイデアを思い付いた、最初にファイルが本当に受信Flashファイルのアドレスによると、サーバー上に存在するかどうかをチェックし、返された結果は、フラッシュファイルが存在するということです、その後swfobject.embedSWF（）メソッドを実行すると、特定のアイデアは、GET/HEAD方法を介してサーバーに要求し、xmlHttpRequestオブジェクトを使用することで、決定しています。 status == 200 || xmlHttp.status == 302ファイルの存在のための基礎として、しかし、このアプローチはまだいくつかの欠陥を持っているようだ、当分の間、私は完璧にすることができなかった、今私の最終的なソリューションの例です。
<html>
<title>DEMO</title>
<head>
<script language="javascript" type="text/javascript" src="JavaScript/swfobject.js"></script> ;
<script type="text/javascript">
(function() {
var xmlHttp,
result,
flashURL = "http://www.pec365.com/Flash/20071113.swf";
var checkFlashURL = function(url) {
xmlHttp = GetXmlHttpObject();
xmlHttp.onreadystatechange = function() {
if ( xmlHttp.readyState == 4 ) {
if ( xmlHttp.status == 200 ||
xmlHttp.status == 302 ) {
return (result = true);
}
}
};
xmlHttp.open("HEAD", url, true);
xmlHttp.send(null);
};
var GetXmlHttpObject = function() {
var xmlHttp = null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
// Older IE
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
// New IE
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
};
// is used to check if the specified Flash file exists on the server
checkFlashURL(flashURL);
window.onload = function() {
if ( result ) {
swfobject.embedSWF(flashURL, "flashcontent", "304", "367", "10.0.0", "expressInstall.swf& quot;, {}, { quality:"autohigh", wmode:"transparent" }, {});
}
else {
window.alert("Your Flash address is invalid, please check it carefully"); // Just for debugging to check if the Flash address is correct
}
}
})();
</script>
</head>
<body>
<form id="Form1">
<div id="flashcontent">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" border="0" />
</a>
</div>
</form>
</body>
</html>
まず、V2.1構文の呼び出し例について、簡単に説明します。
コピーコード
コードは以下の通りです。
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
//1. Initialize variables, parameters, and properties using Json
var flashvars = {
name1: "hello",
name2: "world",
name3: "foobar"
};
var params = {
menu: "false"
};
var attributes = {
id: "dynamicContent2",
name: "dynamicContent2"
};
swfobject.embedSWF("test6_flashvars.swf", "content2", "300", "120", "6.0.0", " expressInstall.swf", flashvars, params, attributes);
//2. Traditional initialization settings, same effect
var flashvars = {};
flashvars.name1 = "hello";
flashvars.name2 = "world";
flashvars.name3 = "foobar";
var params = {};
params.menu = "false";
var attributes = {};
attributes.id = "dynamicContent3";
attributes.name = "dynamicContent3";
swfobject.embedSWF("test6_flashvars.swf", "content3", "300", "120", "6.0.0",
"expressInstall.swf", flashvars, params, attributes);
swfobject.embedSWF("test6_flashvars.swf", "content5", "300", "120",
"6.0.0", "expressInstall.swf", {name1:"hello",name2:"world",name3:"foobar"}, {menu: "false"}, {id:"dynamicContent5",name:"dynamicContent5"});
</script>
前の記事で採った解決策は、ほとんどのニーズを満たしているようですし、互換性も問題ないようなので、ほとんどの方のニーズを満たすことができるはずで、悪い解決策ではありません。しかし、私が発見したより極端なケースのひとつがあります。
コピーコード
コードは以下の通りです。
new SWFObject("http://www.pec365.com/Flash/20071113.swf", "mymovie", "304", "367", "7" ;, "#FFFFFF");
もし、間違ったアドレスのFlashファイルを渡したり、Flashファイルがサーバーから削除されたりすると、次のような、最も望ましくない状況が発生します。
以下の通りです。
コピーコード
コードは以下の通りです。
<html>
<title>DEMO</title>
<head>
<script type="text/javascript" src="swfobject_source.js"></script>
</head>
<body>
<form id="Form1">
<div id="flashcontent">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" border="0" />
</a>
</div>
</form>
<script type="text/javascript">
// Note that I prefixed the Flash file name with an f
var so = new SWFObject("http://www.pec365.com/Flash/f20071113.swf", "mymovie", "304", "367", " ;7", "#FFFFFF");
so.write("flashcontent");
</script>
</body>
</html>
このコードを自分で実行することをお勧めします。また、初めての方は、前の投稿で説明した手順を参照してコードを実行し、これから起こる "災害"を実際に感じてみてください。
はい、真っ白なページが表示され、Flashが表示されなかった時の画像が消えています、どこに行ったのでしょうか？デバッグしてわかったのですが、受信するFlashファイルのアドレスが間違っていても、エラー <object [......]></object> タグに <div id="flashcontent" ;>[......]が作成されるのです。 ]</div> 置換の内容では、このようにあなたが見るものです、高さと304pxと367pxの空白領域の幅を形成する（Flash Playerをインストールした場合、画面の左上隅にマウスの右ボタンをクリックして、あなたは何かを見つけるでしょう）、だから悪夢は、悪夢は来ています。
この悪夢のような結果を解決するために、だから私は悪いアイデアを思い付いた、最初にファイルが本当に受信Flashファイルのアドレスによると、サーバー上に存在するかどうかをチェックし、返された結果は、フラッシュファイルが存在するということです、その後swfobject.embedSWF（）メソッドを実行すると、特定のアイデアは、GET/HEAD方法を介してサーバーに要求し、xmlHttpRequestオブジェクトを使用することで、決定しています。 status == 200 || xmlHttp.status == 302ファイルの存在のための基礎として、しかし、このアプローチはまだいくつかの欠陥を持っているようだ、当分の間、私は完璧にすることができなかった、今私の最終的なソリューションの例です。
コピーコード
コードは以下の通りです。
<html>
<title>DEMO</title>
<head>
<script language="javascript" type="text/javascript" src="JavaScript/swfobject.js"></script> ;
<script type="text/javascript">
(function() {
var xmlHttp,
result,
flashURL = "http://www.pec365.com/Flash/20071113.swf";
var checkFlashURL = function(url) {
xmlHttp = GetXmlHttpObject();
xmlHttp.onreadystatechange = function() {
if ( xmlHttp.readyState == 4 ) {
if ( xmlHttp.status == 200 ||
xmlHttp.status == 302 ) {
return (result = true);
}
}
};
xmlHttp.open("HEAD", url, true);
xmlHttp.send(null);
};
var GetXmlHttpObject = function() {
var xmlHttp = null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
// Older IE
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
// New IE
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
};
// is used to check if the specified Flash file exists on the server
checkFlashURL(flashURL);
window.onload = function() {
if ( result ) {
swfobject.embedSWF(flashURL, "flashcontent", "304", "367", "10.0.0", "expressInstall.swf& quot;, {}, { quality:"autohigh", wmode:"transparent" }, {});
}
else {
window.alert("Your Flash address is invalid, please check it carefully"); // Just for debugging to check if the Flash address is correct
}
}
})();
</script>
</head>
<body>
<form id="Form1">
<div id="flashcontent">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" border="0" />
</a>
</div>
</form>
</body>
</html>
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン