Sup*_*tar 5 html javascript iframe
我已经为客户端创建了一个搜索页面,但在这种情况下,实际的搜索页面位于一个iframe用户面前,该用户会看到一个装饰外壳iframe,它将其URL参数传递给它iframe,然后解释它们并执行搜索.这是我无法改变的.它还向我提出了一个独特的问题,即如果用户键入搜索页面的搜索栏以执行其他搜索,iframe将刷新,但shell页面不会.这意味着URL现在不再与当前搜索相关.如何在不离开此shell页面的情况下更改地址栏中的URL?这个系统的重点iframe在于刷新的时间比整个页面少,所以刷新整个页面会适得其反.
对于只想要代码片段的人来说,这是我对Ian解决方案的最终实现:
<?PHP
// ...
function buildTitleChanger($search) {
?>
window.top.history.pushState({search : "<?PHP echo str_replace("\"", "\\\"", $search); ?>"}, document.title, window.location.search);
window.top.document.title = document.title;<?PHP
}
// ...
?>
Run Code Online (Sandbox Code Playgroud)
这个内联PHP有点脏,但它在100%的时间都有效:3
您可以使用类似的内容更改部分网址window.pushState.看看MDN的解释:
https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history
浏览器兼容性:http://caniuse.com/history
一个包含这些功能并在不支持它的浏览器中提供类似功能的漂亮库是history.js:http://balupton.github.io/history.js/demo/
来自MDN链接的示例:
例
假设http://mozilla.org/foo.html执行以下JavaScript:
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
Run Code Online (Sandbox Code Playgroud)
这将导致显示URL栏http://mozilla.org/bar.html,但不会导致浏览器加载bar.html甚至检查是否bar.html存在.
现在假设用户现在导航到http://google.com,然后单击返回.此时,将显示URL栏http://mozilla.org/bar.html,页面将获得popstate其状态对象包含副本的事件stateObj.页面本身看起来像foo.html,但页面可能会在popstate事件期间修改其内容.
如果我们再次单击,则URL将更改为http://mozilla.org/foo.html,并且文档将获得另一个popstate事件,这次使用null状态对象.在这里,尽管文档可能在收到popstate事件后手动更新其内容,但返回时不会更改文档内容与上一步中的内容.
| 归档时间: |
|
| 查看次数: |
8239 次 |
| 最近记录: |