Javascript 更改父窗口'；单击Iframe中的链接时，使用历史pushState创建URL

我有一个页面，它有一个标题和侧边栏，右侧的内容面板是一个Iframe

在加载到右侧内容面板的页面中，我试图通过单击链接将父窗口中的浏览器URL更新为加载到Iframe中的新页面的URL

我不希望实际的父窗口重新加载URL，而只是更新地址栏中的URL

比如：

window.history.pushState('obj', 'newtitle', '/bookmarks/list/');

---

这是否可以从Iframe中实现？

我可以使用history.pushState在地址栏中更新父窗口URL，方法是使用

postMessage

从子Iframe窗口向父窗口发送新URL，并在父窗口上侦听此事件

当父级收到子iframes

postMessage

事件时，它会使用在该消息中传递的URL更新带有pushSTate的URL

子Iframe

<script>
// Detect if this page is loaded inside an Iframe window
function inIframe() {
    try {
        return window.self !== window.top;
    } catch (e) {
        return true;
    }
}

// Detect if the CTRL key is pressed to be used when CTRL+Clicking a link
$(document).keydown(function(event){
    if(event.which=="17")
        cntrlIsPressed = true;
});
$(document).keyup(function(){
    cntrlIsPressed = false;
});
var cntrlIsPressed = false;

// check if page is loaded inside an Iframe?
if(inIframe()){
    // is the CTRL key pressed?
    if(cntrlIsPressed){
        // CTRL key is pressed, so link will open in a new tab/window so no need to append the URL of the link
    }else{

        // click even on links that are clicked without the CTRL key pressed
        $('a').on('click', function() {

            // is this link local on the same domain as this page is?
            if( window.location.hostname === this.hostname ) {

                // new URL with ?sidebar=no appended to the URL of local links that are clicked on inside of an iframe
                var linkUrl = $(this).attr('href');
                var noSidebarUrl = $(this).attr('href')+'?sidebar=no';

                // send URL to parent window
                parent.window.postMessage('message-for-parent=' +linkUrl , '*');

                alert('load URL with no sidebar: '+noSidebarUrl+' and update URL in arent window to: '+linkUrl);

                // load Iframe with clicked on URL content
                //document.location.href = url;
                //return false;
            }
        });
    }
}
</script>

//检测此页面是否加载到Iframe窗口中
函数inIframe（）{
试一试{
返回window.self！==window.top；
}捕获（e）{
返回true；
}
}
//检测在按住CTRL键的同时单击链接时是否按下了CTRL键
$（文档）.keydown（函数（事件）{
如果（事件编号==“17”）
cntrlIsPressed=true；
});
$（文档）.keyup（函数（）{
cntrlIsPressed=false；
});
var cntrlIsPressed=false；
//检查页面是否加载到Iframe中？
if（inIframe（））{
//按下CTRL键了吗？
如果（cntrlIsPressed）{
//按下CTRL键，链接将在新选项卡/窗口中打开，因此无需附加链接的URL
}否则{
//即使在未按CTRL键的情况下单击的链接上也要单击
$（'a'）。在（'click'，function（）上{
//此链接是否与此页面位于同一域中？
if（window.location.hostname==this.hostname）{
//带有？侧边栏=否的新URL附加到在iframe内部单击的本地链接的URL
var linkUrl=$（this.attr（'href'）；
var noSidebarUrl=$（this.attr（'href'）+'？边栏=no'；
//将URL发送到父窗口
parent.window.postMessage（'message-for-parent='+linkUrl'*'）；
警报（'加载不带侧栏的URL:'+noSidebarUrl+'并将arent窗口中的URL更新为：'+linkUrl'）；
//使用单击的URL内容加载Iframe
//document.location.href=url；
//返回false；
}
});
}
}

---

父窗口

<script>

// parent_on_message(e) will handle the reception of postMessages (a.k.a. cross-document messaging or XDM).
function parent_on_message(e) {
    // You really should check origin for security reasons
    // https://developer.mozilla.org/en-US/docs/DOM/window.postMessage#Security_concerns
    //if (e.origin.search(/^http[s]?:\/\/.*\.localhost/) != -1
    //    && !($.browser.msie && $.browser.version <= 7)) {
        var returned_pair = e.data.split('=');
        if (returned_pair.length != 2){
            return;
        }
        if (returned_pair[0] === 'message-for-parent') {
            alert(returned_pair[1]);
            window.history.pushState('obj', 'newtitle', returned_pair[1]);
        }else{
            console.log("Parent received invalid message");
        }

    //}
}

jQuery(document).ready(function($) {
    // Setup XDM listener (except for IE < 8)
    if (!($.browser.msie && $.browser.version <= 7)) {
        // Connect the parent_on_message(e) handler function to the receive postMessage event
        if (window.addEventListener){
            window.addEventListener("message", parent_on_message, false);
        }else{
            window.attachEvent("onmessage", parent_on_message);
        }
    }
});
</script>

//父消息（e）将处理postMessages（也称为跨文档消息或XDM）的接收。
函数父函数关于消息（e）{
//出于安全原因，您确实应该检查来源
// https://developer.mozilla.org/en-US/docs/DOM/window.postMessage#Security_concerns
//如果（例如：origin.search（/^http[s]？：\/\/.*.localhost/）！=-1
//&&&！（$.browser.msie&&$.browser.version使用
Window.postMessage（）
的另一个解决方案

Iframe：


Array.from（document.querySelectorAll（'a'））.forEach（el=>{
el.addEventListener（'单击'，事件=>{
event.preventDefault（）；
window.parent.postMessage（this.href，'*'）；
});
});

主页：

当前URL:
const$currentUrl=document.querySelector（“#当前url”）；
$currentUrl.textContent=location.href；
window.addEventListener（'message'，event=>{
pushState（null，null，event.data）；
$currentUrl.textContent=event.data；
});

请参阅。
这里有一些方法可以检测iframe的URL更改，而不管是否使用历史API

setInterval(function() {

    var iframeUrl = document.getElementById("the-iframe").contentWindow.location.href;

    if (window.lastIframeUrl !== iframeUrl) {
        console.log("iframe url changed", iframeUrl);
        window.lastIframeUrl = iframeUrl
    }

}, 100)

“从Iframe可以这样做吗？”您尝试过这种方法吗？@guest271314我尝试过，它更新了Iframe的URL，因此我的Iframe加载了一个新页面并有了新的URL，但父URL从未更改。我想我会尝试使用ifram
onmessage
事件从Iframe向父URL发送新URL，并在父页面中调用
窗口。history.pushState
 从家长那里，看看这是否会对magickSee@guest271314起作用，这篇文章将更改页面内容。我需要在不重新加载页面的情况下更新URL。上面发布的想法奏效了。使用post消息，我的家长收到URL，然后发送pushState来更新家长URL