3

[View a Product Demonstration] をクリックすると、このページのビデオ プレーヤーの機能をミラーリングしようとしています。スクロールが無効になり、サイズが定義されている新しいウィンドウ (新しいタブではない) がポップアップ表示されます。私のポップアップにもこれがあることが重要です。ダイアログ ボックスが機能しません。

私が使用しているビデオは YouTube ビデオです。ページ上のリンクをクリックするだけで、ビデオのポップアップを作成できます。ただし、ポップアップ (画像 + テキスト) ウィンドウに他のコンテンツも表示できるようにする必要があります。

私はjQueryが初めてなので、これを達成するための最良のアプローチがわかりません。私が最初に考えたのは、すべてを非表示の div に配置し、要素をクリックするとそのコンテンツを新しいウィンドウに表示し、クリックすると jQuery で css を適用して適切に表示できるようにすることでした。

SO について調べたところ、このような作品が見つかりました。問題は、新しいウィンドウではなく新しいタブで開き、CSS が新しいタブで失われることです (これはインライン スタイルで修正できますが、理想的ではありませんが、問題はありません)。タブの代わりに新しいウィンドウにできればこれを使用できます。ここにフィドルの私のコードがあり、ここにそれがあります：

<script type="text/javascript">
    function printClick() {
        var w = window.open();
        var html = $("#video-container").html();
        $(w.document.body).html(html);
    }

    $(function() {
        $("a#video-link").click(printClick);

    });
</script>

その後：

<div id="product-description">
    <a href="#" id="video-link">
    <img src="cookware-product-demonstration-video.png" alt="View Product Demonstration Video" width="355" height="55" style="padding: 0px 0px 10px 0px;" border="0" />
    </a>
</div>
<div id="video-container" style="display: none;>
    <div id="video" style="width: 600px; position: relative; margin: 0px auto;">
        <div id="video-header">
            <img src="logo.gif" height="30" width="120" alt="Company Logo" style="float: left;"/>
            <p style="float: right">Product Demonstration Video</p>
        </div>
        <iframe width="600" height="338" src="http://www.youtube.com/embed/yeuCLMppZzc?rel=0"  frameborder="0" allowfullscreen></iframe>
    </div>
</div>

しかし、これは本当に最善のアプローチですか？これを行うためのより良い方法がなければならないと感じています。href に target="_blank" が追加されている投稿をいくつか見つけました ( example here ) が、URL を開いていないため、これまでのところうまくいきませんでした。

これを行う方法についてのヘルプやアドバイスをいただければ幸いです。どうもありがとう。

4

1 に答える 1

1

あなたができることは、クエリ文字列を使用することです。

JavaScript でクエリ文字列値を取得するにはどうすればよいですか?の関数を使用する 、別のページに次のものがあります。

ジャバスクリプト:

function getParameterByName(name)
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.search);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

$(document).ready(function(){
    var width = 400,
    height = 300;

    //I've constructed it like this to prevent possible embedding errors

   var vid = 'http://www.youtube.com/v/' + getParameterByName("test");
   $('<object width="' + width + '" height="' + height + '">' +
   '<param name="movie" value="' + vid + '" />' +
   '<param name="allowFullScreen" value="true" />' +
   '<param name="allowscriptaccess" value="always" />' +
   '<param name="wmode" value="opaque">' +
   '<embed src="' + vid + '" type="application/x-shockwave-flash" width="' + width + '" height="' + height + '" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" /></object>')
   .appendTo($('#div1')); 
});

ページ 1 の例: http://fiddle.jshell.net/dirtyd77/rmEvY/5/

次に、別のページで、次を使用します。

ジャバスクリプト:

$(document).ready(function(){
    $("#b1").click(function(){
       var url = 'http://fiddle.jshell.net/dirtyd77/rmEvY/5/show/?test=yeuCLMppZzc';
       window.open(url, '_blank', "height=400,width=450");  //set height and width to make new window
    });
});

デモ: http://jsfiddle.net/dirtyd77/tVEBj/1/

最終製品のデモは次のとおりです: http://fiddle.jshell.net/dirtyd77/tVEBj/1/show/

これは私がおそらくそれを行う方法ですが、決して最良の方法ではありません. うまくいけば、これはあなたが探しているものです。ご不明な点がございましたら、お気軽にお問い合わせください。幸運を！

編集：

いろいろいじくり回した後、これを 1 ページで行う方法を見つけました。

次のようなことを試してください：

$(document).ready(function(){
    $("#b1").click(function(){
        var win = window.open('', '_blank', "height=400,width=450");
        var width = 400,
        height = 300,
        vid='http://www.youtube.com/v/yeuCLMppZzc';
        var obj = '<object width="' + width + '" height="' + height + '">' +
                            '<param name="movie" value="' + vid + '" />' +
                            '<param name="allowFullScreen" value="true" />' +
                            '<param name="allowscriptaccess" value="always" />' +
                            '<param name="wmode" value="opaque">' +
                            '<embed src="' + vid + '" type="application/x-shockwave-flash" width="' + width + '" height="' + height + '" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" /></object>';
        win.document.write(obj);
    });
});

デモ：

http://fiddle.jshell.net/tVEBj/6/

于 2013-03-12T20:12:48.533 に答える