1

ビデオが埋め込まれたシンプルなページがあります。以下は例です。埋め込まれたビデオの iframe の幅を取得したいのですが、これはさまざまです (たとえば、ビデオが youtube または vimeo からのものである場合)。次に、その横に div をテキストとともに配置し、それに応じて後者の幅を調整できます

<html>
  <head>
  </head>
      <body onLoad = "resizeElements()">
    <iframe width="420" height="315" src="http://www.youtube.com/embed/a34QTcpnKww"     frameborder="0" allowfullscreen>
    </iframe>  
  </body>
    <script language="JavaScript" type="text/javascript">
    function resizeElements() 
    {
      var iframeVideos = document.getElementsByTagName("iframe");
      for ( var i = 0; i < iframeVideos.length; i++) 
      {
        video = iframeVideos[i];
        alert ( ">" + video.style.width+ "<" );
        video.style.width = "112px";
        video.style.height = "63px";
        alert ( ">" + video.style.width+ "<" );
      }
    }
  </script>
</html>

ページが読み込まれ、最初のアラート ( iframe の幅を持つ必要があります) には "><" のみが表示され、その間にビデオの幅は表示されません。

ビデオオブジェクトがnullだからではないと確信しています。次の行は、期待どおりにサイズを変更します。サイズ変更後、同じアラートで正しい幅が表示されます。

幅をすぐに利用できるようにするためにできることはありますか?

私はjQueryなどのライブラリの大ファンではありませんが、そのうちの1つがタグ内の文字列を解析するよりも複雑にならない簡単な解決策を提供する場合に備えて検討してください. 将来、ページのメンテナンスが必要になった場合に備えて...

ありがとう！

4

2 に答える 2

1

DOM：element.offset *

offsetWidthとoffsetHeightが役立つはずで、IE6とすべての最新のブラウザーでもサポートされています。

alert ( ">" + video.offsetWidth +  "<" );

jsFiddleデモをご覧ください。

jQuery width（）/ height（）

jQueryを使用する準備ができていると感じたら、チェックアウトし.width()てくださいheight()。私もjQueryの「ファン」ではありませんが、ブラウザーの不整合を回避するのにうんざりしていて、（現在のインラインイベントハンドラーではなく）高度なイベント処理サポートと優れたDOMヘルパーが必要な場合は、すばらしいツールです。

属性

もう1つの方法は、HTML属性のコンテンツ（being width="420"）を単純に取得することです。.getAttribute(width)または.width（DOMプロパティにアクセスする）を使用してこれを行うことができます。

 alert ( ">" + video.width +  "<" );
 alert ( ">" + video.getAttribute(width) +  "<" );
于 2012-06-06T20:19:56.850 に答える
1

幅と高さの属性に一致するようにスタイル属性を設定する必要があると思います。

<iframe style="width:420;height:315" width="420" height="315" src="http://www.youtube.com/embed/a34QTcpnKww"     frameborder="0" allowfullscreen>
    </iframe>

関数では、style属性を使用しているためです。

于 2012-06-06T20:20:08.707 に答える