Hostinger网站构建器中嵌入JavaScript无法访问document body怎么办？

问题根源 #

Hostinger网站构建器（原Zyro）的页面渲染逻辑和纯HTML页面不同：它可能把实际页面内容放在iframe中，或是通过动态渲染框架（如虚拟DOM）加载，导致你直接访问document.body只能看到嵌入的脚本，找不到实际的锚标签。

解决方案 #

1. 检查页面是否使用了iframe #

打开浏览器开发者工具（F12），切换到「Elements」面板，搜索<iframe>标签。如果实际页面内容在iframe里，需要通过iframe的contentDocument访问内部元素：

function imLoaded() {
    // 找到目标iframe（可根据实际src或class筛选，这里用通用选择器）
    const pageIframe = document.querySelector('iframe');
    if (!pageIframe) return;

    // 等待iframe加载完成
    pageIframe.addEventListener('load', () => {
        const hyp = pageIframe.contentDocument.querySelectorAll('[data-page-id]');
        for (let i = 0; i < hyp.length; i++) {
            switch (hyp[i].dataset.pageId) {
                case 'zgkVBI':
                    hyp[i].title = "this is title one";
                    break;
                case 'zW5Rwe':
                    hyp[i].title = "this is title two";
                    break;
            }
        }
    });
}
window.addEventListener("load", imLoaded);

2. 用MutationObserver监听动态渲染的DOM #

如果页面是通过动态框架渲染的，window.load事件触发时目标锚标签可能还未生成。此时用MutationObserver监听DOM变化，直到元素出现：

function setupTitleSetter() {
    const observer = new MutationObserver((mutations) => {
        const hyp = document.querySelectorAll('[data-page-id]');
        if (hyp.length > 0) {
            // 为锚标签设置title
            hyp.forEach(link => {
                switch (link.dataset.pageId) {
                    case 'zgkVBI':
                        link.title = "this is title one";
                        break;
                    case 'zW5Rwe':
                        link.title = "this is title two";
                        break;
                }
            });
            observer.disconnect(); // 处理完成后停止监听
        }
    });

    // 监听body及其子树的节点变化
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
}

window.addEventListener("load", setupTitleSetter);

3. 定位实际内容容器 #

如果以上方法无效，直接在开发者工具中搜索锚标签的文本（比如「This is a test」），找到它所在的父容器（比如带有zyro-content类的div），然后直接从该容器中查询元素：

document.addEventListener("DOMContentLoaded", () => {
    // 替换成你找到的实际容器选择器
    const contentContainer = document.querySelector('.zyro-content');
    if (!contentContainer) return;

    const hyp = contentContainer.querySelectorAll('[data-page-id]');
    hyp.forEach(link => {
        switch (link.dataset.pageId) {
            case 'zgkVBI':
                link.title = "this is title one";
                break;
            case 'zW5Rwe':
                link.title = "this is title two";
                break;
        }
    });
});

关键操作提示 #

1. 打开F12开发者工具，在「Elements」面板中搜索锚标签文本，确认它的实际位置（iframe/特定容器）
2. 优先使用DOMContentLoaded事件代替window.load，它会在DOM树构建完成后立即触发，无需等待图片等资源加载
3. 调试时可加入console.log(hyp)，查看是否成功获取到目标元素

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