在地址栏中显示iFrame网址 [英] Display iFrame url in address bar

问题描述

是否可以在网址地址栏中包含iframe内容的网址？

例如，我有一个域 sub.test.com ，其中有一个iframe，src为 realpage.com

浏览页面逻辑上不会改变地址栏中的任何内容，因为我们在iframe上打开了真实页面其他域名。

我知道不可能将整个网址注入地址栏，但如果没有主机名怎么办？

例如，如果我在 iframe 中打开网站 realpage.com/first.php ，我想要地址栏中的网址更改为 sub.test.com/first.php 或 sub.test.com/first

解决方案

这里有两个选项可以使用 pushState （ 更多信息）或者您可以使用哈希键导航（ pushState 的浏览器兼容。更多信息） p>

pushState示例：

  var stateObj = {foo：bar} ; 
 history.pushState（stateObj，page 2，bar.html）; 
  

哈希密钥示例：

  if（窗口中的onhashchange）{
 alert（浏览器支持hashchange事件！）; 
} 
 
 function locationHashChanged（）{
 if（location.hash ===#somecoolfeature）{
 somecoolfeature（）; 
} 
} 
 
 window.onhashchange = locationHashChanged; 
  

有关详细信息，请访问：在浏览器中更改URL而不使用JavaScript加载新页面

Is it possible to include the url of the iframe content in the url address bar?

For example, i have a domain sub.test.com which has an iframe with src to realpage.com

Surfing through the page logically doesnt change anything in the address bar since we are opening the realpage in the iframe on other domain.

I know it is not possible to inject the whole url into address bar, but what about without the hostname?

For example, if i open site realpage.com/first.php in iframe, i want the url in address bar to change to sub.test.com/first.php or sub.test.com/first

解决方案

You have two options here you can either use pushState (more info) or you can use Hash key navigation (more info) if you wish to make it compatible with browsers that do not yet have pushState available.

pushState example:

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

Hash Key example:

if ("onhashchange" in window) {  
  alert("The browser supports the hashchange event!");  
}  

function locationHashChanged() {  
  if (location.hash === "#somecoolfeature") {  
    somecoolfeature();  
  }  
}  

window.onhashchange = locationHashChanged;

For more info here is another link: Change the URL in the browser without loading the new page using JavaScript

这篇关于在地址栏中显示iFrame网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！