当您单击“查看产品演示”时,我正在尝试镜像video player on this page的功能。它弹出一个新窗口(不是新选项卡),其中禁用滚动并定义大小。重要的是我的弹出窗口也有这个。对话框不起作用。
我正在使用的视频是YouTube视频;我可以通过单击页面上的链接自行弹出视频。但是,我还需要能够在弹出窗口(图像+文本)窗口中显示其他内容。
我是jQuery的新手,所以我不知道实现这一目标的最佳方法。我的第一个想法是,我可以将所有内容放在隐藏的div中,然后在单击某个元素时将该内容显示在新窗口中,并在单击时使用jQuery应用css以使其正确显示。
在研究了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,所以到目前为止这对我没用。
对于如何做到这一点的任何帮助或建议表示赞赏。非常感谢你。
答案 0 :(得分:1)
你可以做的是使用查询字符串。
使用How can I get query string values in JavaScript?中的功能,在另一页上有以下内容:
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/
然后在另一页上,使用以下内容:
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
});
});
样本: 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);
});
});
样本: