如何实现网页标题与iframe标题同步？代码未达预期求排查

你的代码存在这些问题： #

• 事件绑定逻辑混乱且重复：window.onload里已经给iframe绑定了load事件调用updateTitle，但updateTitle里又嵌套给iframe重复绑定load事件，且仅针对gameId='9'生效；加上每秒执行的setInterval，会导致事件重复绑定堆积，逻辑完全冗余。
• DOM选择器错误：页面里的容器是class="game-player"，但代码里用document.getElementById("game-player")查找，id和class混淆，根本找不到对应元素。
• 同源策略限制：如果iframe加载的是外部域名页面，浏览器会禁止访问contentDocument.title，直接获取标题会报错。
• 不必要的定时器：setInterval(updateTitle, 1000)完全多余，iframe的load事件已经能触发标题更新，重复调用只会浪费性能。

修复后的代码 #

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>            
    window.onload = function() {
        const urlParams = new URLSearchParams(window.location.search);
        const gameId = urlParams.get("id");
        const iframe = document.getElementById("game-iframe");
        const gamePlayer = document.querySelector(".game-player");

        fetch("games.json")
            .then(response => response.json())
            .then(data => {
                const game = data.find(item => item.id === gameId);
                
                if (game) {
                    iframe.src = game.url;
                } else {
                    gamePlayer.innerHTML = "Invalid game ID.";
                }
            })
            .catch(error => {
                console.error("Error:", error);
            });

        // 只绑定一次iframe加载完成事件
        iframe.addEventListener("load", function() {
            updateTitle(this);
        });
    };

    function updateTitle(iframeElement) {
        try {
            // 尝试获取iframe标题（仅同源页面有效）
            const iframeTitle = iframeElement.contentDocument.title;
            if (iframeTitle) {
                document.title = iframeTitle;
            }
        } catch (error) {
            console.warn("无法获取iframe标题，存在跨域限制:", error);
            // 跨域时从games.json读取预设标题（需确保json里有title字段）
            const urlParams = new URLSearchParams(window.location.search);
            const gameId = urlParams.get("id");
            fetch("games.json")
                .then(response => response.json())
                .then(data => {
                    const game = data.find(item => item.id === gameId);
                    if (game && game.title) {
                        document.title = game.title;
                    }
                });
        }
    }
    </script>
</head>
<body>
    <div class="game-player">
        <iframe id="game-iframe" frameborder="0" scrolling="yes" marginheight="0px" marginwidth="0px" allowfullscreen></iframe>
    </div>
</body>
</html>

额外说明 #

• 若games.json里没有title字段，且iframe是第三方跨域页面，只能让iframe所在页面通过postMessage主动发送标题到父页面，父页面监听message事件来更新标题。
• 修复后的代码移除了冗余定时器，仅在iframe加载完成时触发一次标题更新，避免不必要的性能消耗。

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