将隐藏div显示为新窗口中的内容

Question

我试图在单击查看产品演示时镜像video player on this page的功能。它会弹出一个新窗口（不是新选项卡），其中禁用滚动并定义大小。我的弹出窗口也有这个很重要。对话框将不起作用。

我使用的视频是YouTube视频;我可以通过单击页面上的链接自行弹出视频。但是，我还需要能够在弹出窗口（图像+文本）中显示其他内容。

我是jQuery的新手，所以我不知道实现这个目标的最佳方法。我的第一个想法是，我可以把所有东西都放在一个隐藏的div中，然后在点击一个元素时在一个新窗口中显示这些内容，点击时将jss应用于jQuery，使其正确显示。

经过对SO的研究，我找到了this，这是哪类作品。问题是它打开一个新的选项卡，而不是一个新的窗口，并且CSS在新选项卡中丢失（我可以使用内联样式修复，这并不理想，但我可以忍受它）。我可以使用这个，如果我可以使它成为一个新窗口而不是标签。 Here is my code in a fiddle这里是下面：

<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> 

但是，事实真的是最好的方法？我觉得必须有更好的方式来做到这一点。我发现了几个帖子，其中target =“_ blank”被添加到href（example here），但由于我没有打开一个URL，所以迄今为止还没有为我工作。

任何帮助或建议如何做到这一点表示赞赏。非常感谢。

Answer 1

你可以做的是使用查询字符串。

使用从How can I get query string values in JavaScript?的功能，已经在另一页上如下：

JAVASCRIPT： http://fiddle.jshell.net/dirtyd77/rmEvY/5/

然后在另一页上，使用以下：

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的实施例：

JAVASCRIPT：

$(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 
    }); 
}); 

DEMO： http://jsfiddle.net/dirtyd77/tVEBj/1/

下面是最终产品的演示： http://fiddle.jshell.net/dirtyd77/tVEBj/1/show/

这是我会怎么可能去了解它，但它绝不是最好办法。希望这是你正在寻找的。如果您有任何问题，请告诉我！祝你好运！

---

编辑：

一些修修补补后，我找到了一种方法在一个页面来做到这一点。

尝试这样：

$(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); 
    }); 
}); 

DEMO：

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