如何从嵌入主页面的iframe创建指向主页面锚点的链接？生产环境失效

问题根源 #

本地测试时主页面与iframe属于同源（均为localhost），因此parent.location.hash能正常修改父页面锚点；但部署后若主页面与iframe托管在不同域名（比如主页面在你的自定义域名，iframe在GitHub Pages域名下），浏览器的同源策略会禁止iframe直接操作父页面的location对象，导致点击链接无响应。

解决方案：用postMessage实现跨域通信 #

postMessage是浏览器原生的跨域页面通信API，可安全实现不同域名页面间的指令传递。

1. 修改主页面（index.html） #

添加消息监听脚本，接收iframe发来的锚点跳转指令：

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Page principale</title>
</head>
<body>
    <h1 id="section1">Section 1</h1>
    <p>Ceci est la section 1.</p>
    <h1 id="section2">Section 2</h1>
    <p>Ceci est la section 2.</p>

    <iframe src="iframe.html" width="100%" height="300px"></iframe>

    <script>
        // 监听来自iframe的消息
        window.addEventListener('message', function(event) {
            // 验证消息来源，仅处理信任域名的请求（替换为你的iframe实际域名，如https://xxx.github.io）
            if (event.origin !== 'https://your-github-pages-domain.github.io') return;
            
            // 处理锚点跳转指令
            if (event.data.type === 'scrollToAnchor') {
                const targetElement = document.getElementById(event.data.anchorId);
                if (targetElement) {
                    // 可选：平滑滚动到锚点，也可直接用window.location.hash = event.data.anchorId
                    targetElement.scrollIntoView({ behavior: 'smooth' });
                }
            }
        });
    </script>
</body>
</html>

2. 修改iframe页面（iframe.html） #

修改链接点击逻辑，通过postMessage向主页面发送跳转请求：

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Iframe</title>
</head>
<body>
    <h1>Contenu de l'iframe</h1>
    <a href="#section1" onclick="sendAnchorRequest('section1'); return false;">Aller à la section 1</a>
    <a href="#section2" onclick="sendAnchorRequest('section2'); return false;">Aller à la section 2</a>

    <script>
        function sendAnchorRequest(anchorId) {
            // 向父页面发送消息，指定目标域名（替换为主页面实际域名，避免用*提升安全性）
            parent.postMessage(
                { type: 'scrollToAnchor', anchorId: anchorId },
                'https://your-main-page-domain.com'
            );
        }
    </script>
</body>
</html>

核心注意事项 #

• 域名校验必须做：主页面的event.origin验证能防止恶意页面发送伪造指令，避免安全风险。
• 明确目标域名：iframe的postMessage中尽量指定主页面的具体域名，不要用通配符*。
• 跳转方式可选：若不需要平滑滚动，直接替换为window.location.hash = event.data.anchorId即可，效果与原生锚点一致。

内容的提问来源于stack exchange，提问作者Greg