在保留旧的静态页面的同时拥有动态内容

Question

我有一个视频标题列表。每个页面都包含有问题的视频和一些信息(播放器、描述、讨论等)。

<div id="video-list">
<a href="/Video/title-1">Title 1</a><br />
<a href="/Video/title-2">Title 2</a><br />
<a href="/Video/title-3">Title 3</a><br />
</div>

我想用Javascript/JQuery让事情更具动态性。屏幕一分为二，视频列表在左侧，信息在右侧。

<a href="javascript: PlayVideo(123);">Title 1</a>

但我仍然想为没有javascript和搜索引擎爬虫的人保留旧的链接。

这是个好主意吗，比如

<a href="/Video/title-1" videoid="123">Title 1</a>

并使用JQuery循环所有锚点以获取视频并替换href？

(服务器端是javascript mvc，asp.net和静态端已经可以工作了)

Answer 1

您可以使用框架集，适用于所有浏览器。这是一种古老的方法，但会给你想要的东西，因为它不依赖于Javascript

<frameset cols="25%,*">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
</frameset>

供您参考frameset

Answer 2

简而言之，您可以使用iFrame来实现您想要的功能。将屏幕分成两个div，左侧div存储链接，右侧div存储iframe和视频播放器。

http://jsfiddle.net/2vmYG/ -> full css

<div id="container">
    <div id="videoList">
        <a href='http://www.dailymotion.com/video/xzvsp7_joe-jack-the-mogul-mulla_music#.UZMPerUwpuA' target="video">Video 1</a><br/>
        <a href='http://www.dailymotion.com/video/xzu16h_daft-punk-random-access-memories-unboxed_music#.UZMPRbUwpuA' target="video">Video 2</a><br/>
    </div>
    <div id="videoPlayer">
        <iframe id='video' src=""></iframe>
    </div>
</div>

如果你正在寻找一个完整的AJAX/jQuery解决方案，你需要一个播放器(flowplayer，jwplayer)等等。