使用 popunder 或在新选项卡中打开站点不间断的音乐

Posted

技术标签:

【中文标题】使用 popunder 或在新选项卡中打开站点不间断的音乐【英文标题】:Uninterrupted music using popunder or opening site in a new tab 【发布时间】:2013-03-01 14:53:50 【问题描述】:

我本来想继续写这篇讨论的,但我的名声不允许我编辑或回答(对此感到抱歉): Uninterrupted background music on website

所以快速进入重点:

我确实讨厌网站上的音乐,但很遗憾,这次我找不到任何方法来改变客户的想法。 我们正在通过通信(图形)代理机构工作,所以我不能告诉最终客户他是 xxiot,我真的需要让代理机构高兴,因为他们最近给了我们很多事情要做,而现在是好东西。

因此,他们希望网站上有音乐,并且他们希望在每次页面加载时都不必重新启动。

我已经决定避免使用框架。

我在试图找到“最好”的方法之间挣扎:

打开一个带有音乐的小弹出窗口(想象一下:“我们建议您使用此音乐访问我们的网站..如果您只是讨厌它关闭此弹出窗口”) PRO:对 SEO 来说应该不会太糟糕 缺点:popunder 不是很可靠,浏览器经常更换并且它们停止工作,我不想花时间修复它.. :) 这是我尝试过的脚本https://github.com/hpbuniat/jquery-popunder 但正如我所说的只在 Firefox 和 IE 上有效,在 Chrome 25 上它作为弹出窗口打开,在 Safari 上不能正常工作。

反之亦然:该域在仅带有徽标、背景和音乐的页面上打开,自动打开一个带有常规站点的新选项卡...如果有人关闭初始选项卡,他们不会有音乐,但如果他们没有,他们基本上有连续的音乐......当他们关闭浏览器时,沉默又回来了:) PRO:应该适用于所有浏览器(或者至少我可以备份输入站点链接,对 SEO 也很有用) 缺点:搜索引擎优化呢???它会索引其他页面吗?输入站点链接就足够了吗?我真的很担心。 :(

我讨厌自己,我讨厌网站上的音乐该死..

谢谢你们,我希望你们会为我流泪:)

【问题讨论】:

选项 3,使用 Ajax 加载所有内容并使用 html5 pushstate 与地址栏一起工作。多劳多得,收效甚微。 这就是我的老公司所做的nowthenrecords.com 是的.. 那会很好,但是我已经完成了网站并且已经生活了,这样做将是一项不花钱的大量工作,特别是因为要做 seo 友好需要一些注意事项... 只拦截所有的A标签点击,防止默认,注入新的body。 ajaxified 和 seo 兼容 【参考方案1】:

对我来说,让它与 ajax 一起工作似乎并不需要大量的工作,即使它是一个很好的体验,它将使您更好地使用和理解当今使用的技术,而不是玩弄 10 年前的 hacky 代码,并从网络的黑暗面复制和粘贴一些用于 popunder 的晦涩脚本。

你到现在所做的所有工作都没有白费,其实这就是渐进增强的原则。让它适用于所有人(包括 seo 机器人),然后改进它。

这样的事情会将你所有的锚标记转换为 ajax 请求,但它们仍然会回退到普通页面请求。

$('body').on('click', 'a', function() 
var url = $(this).attr('href');
$.ajax(
    url: url
).done(function(response) 
    $('body').html(response);
);
return false;
);

您可以在请求 url 中添加 ?ajax=1 以指示后端仅在存在时返回正文。

显然,您的所有脚本/css 都必须在初始页面上提供,因为头部不会改变(除非您想让所有内容更复杂)并且需要触发事件绑定或将其委托给正文。

你需要为你的播放器设置一个 div(可能有一个固定的位置),所以代码实际上更像

<head>
    ...
</head>
<body>
   <div id="player></div>
   <div id="wrapper">[page html]</div>
</body>

您将定位 #wrapper 而不是正文。

【讨论】:

是的,这绝对是最好的方法,虽然我希望避免这种情况,但我们有很多截止日期,而且我们现在可用的程序员都不能以一种不是浪费钱。我会把它作为我最后的选择。不过谢谢!

以上是关于使用 popunder 或在新选项卡中打开站点不间断的音乐的主要内容,如果未能解决你的问题,请参考以下文章

使用角度导航时,在新选项卡中打开链接未在新选项卡中打开

使用ajax在新选项卡中打开文件

如何使用 Ajax 成功在新选项卡中打开 URL?

单击 HTML 按钮时在新浏览器选项卡中打开 URL

如何在新选项卡中打开文件?

AngularJS UI 路由器 - 在新的浏览器选项卡中使用数据打开状态