你基本上有三个选择：
您找到的那个，打开一个非常小的弹出窗口（可能只显示媒体控件），因此当用户导航时，它不会受到页面被拆除的影响。
使用框架也是一样。
在导航而不是实际导航时使用 ajax 加载内容也是如此。
由于您不太喜欢＃1，让我们看看＃2，然后再回到＃3。
当用户打开播放器时，你真的会进入一个带有播放器的页面和一个非常大的iframe 以及其余内容：
<!doctype html>
<html>
<head>
<!-- ... -->
</head>
<body>
<!-- player here -->
<iframe class="main" src="main.html"></iframe>
</body>
</html>
您可以使用 CSS 尽可能地无缝连接。为了使其可链接，您可以在 URL 中使用一个大片段，这是应该进入框架的页面的 URL，例如：
http://example.com/#forum.html&section=23
当您的主页加载时，您抓取片段，并将其用作iframe 上的src。
您可以在 iframe 上侦听导航事件并更新主窗口上的哈希片段，以便书签工作，和/或在您网站的每个页面上都有可能被导航到的 JavaScript 告诉容器页面（@ 987654326@) 它的 URL 是什么。
#3 与 #2 类似，只是不是让导航以正常方式发生，而是在用户单击时通过 ajax 加载所有内容，将其加载到（比如说）主要内容 div 而不是 iframe .这也可以使用散列片段来确保它完全可链接/可添加书签等，但需要重写加载页面中的所有链接，以便它们更新散列片段而不是主 URL。
#2 和#3（和#1）各有优缺点。 #1 可能是最少的工作。 #2 可能排在第二位，然后是 #3，但我可能会落后。
这是#2 的一个快速而肮脏的版本，它轮询哈希更新，以便框架中加载的页面根本不需要知道任何关于此的内容。请注意，您必须提供给其他人的只是页面；他们的页面保持不变。如果他们担心页面排名，他们会希望在标记中包含其页面的规范 URL。
withplayer.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
<style>
html, body {
padding: 0;
margin: 0;
}
html {
height: 100%;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
height: 100%;
position: relative;
}
div.player {
height: 30px;
padding: 2px;
}
iframe.content {
border: none;
position: absolute;
top:30px;
width: 100%;
/*bottom: 0px; Sigh, this works on elements other than iframe, see 'resize' JavaScript below */
}
</style>
</head>
<body>
<div class="player"></div>
<iframe class="content"></iframe>
<script>
(function() {
// Fill in our "player"
var dt = new Date().toISOString();
document.querySelector(".player").innerHTML =
"This div is our pretend player: The div was loaded on " +
dt.substring(0, 10) + " at " + dt.substring(11, 19) + ".";
// Get the iframe
var content = document.querySelector(".content");
// Listen for hash changes
window.onhashchange = loadContent;
// Load any initial hash we have
loadContent();
// Get our current hash, without the leading #
function getHash() {
return location.hash.replace(/^#/, '');
}
// Get the hash equivalent of the current content in the content iframe
function getContentHash() {
var loc, hash;
loc = content && content.contentWindow && content.contentWindow.location;
hash = loc && loc != "about:blank" ? loc.pathname + loc.search + loc.hash : undefined;
return hash;
}
// Load the content for the current hash
function loadContent() {
// If we have an initial hash, apply to the iframe
var hash = getHash();
if (hash) {
content.src = hash;
}
}
// Poll for changes to the frame's location, update our hash if
// it doesn't match
setInterval(pollContent, 100);
function pollContent() {
var newHash;
newHash = getContentHash();
if (newHash !== undefined && newHash !== getHash()) {
location.hash = "#" + newHash;
}
}
// Stoopid iframes won't stick to the bottom, have to resize their height
resize();
window.onresize = resize;
function resize() {
content.style.height = (window.innerHeight - 30) + "px";
}
})();
</script>
</body>
</html>