DOMContentLoaded

请拷贝示例文件"CaseStudy\WebViewer\简单浏览器.Table"，然后基于新文件测试本节示例代码，避免被不相干的代码干扰。

DOMContentLoaded在DOM解析完成后执行。

e参数属性：

DOMContentLoaded事件和ContentLoading事件的功能差不多，也可以运行js代码，或注入css样式和js函数。

所以上一节在ContentLoading事件中提供的示例代码，其实也都可以写在DOMContentLoaded事件中，效果一样。

但由于DOMContentLoaded触发时，DOM已经解析完成，所以可以针对具体的某个元素进行操作， 或增加删除元素，使用起来比ContentLoading更方便。

示例一

注入css样式参考：

Dim jsCode As String = <![CDATA[
(function() {
var style = document.createElement('style');
style.textContent = `
body {
background-color: #f0f8ff !important;
font-family: 'Arial', sans-serif;
}
h1 {
color: red !important;
border-bottom: 2px solid blue;
}
p {
line-height: 1.6;
}
`;
document.head.appendChild(style);
})();
]]>.Value
e.Sender.WebViewer.ExecuteScriptAsync(jsCode) '运行JS代码

示例二

修改元素内容参考代码：

Dim jsCode As String = <![CDATA[
    (function() {
        // 修改第一个h1标签
        var h1 = document.querySelector('h1');
        if(h1) {
            h1.textContent = '这个标题已被Foxtable修改！';
            h1.style.color = 'darkblue';
            h1.style.fontSize = '28px';
        }
 
        // 为所有段落添加前缀
        var paragraphs = document.querySelectorAll('p');
        paragraphs.forEach(function(p, index) {
            p.textContent = '第' + (index + 1) + '段：' + p.textContent;
        });
    })();
]]>.Value
e.Sender.WebViewer.ExecuteScriptAsync(jsCode) '执行代码

示例三

插入元素参考代码：

Dim jsCode As String = <![CDATA[
    (function() {
        // 在页面顶部插入自定义横幅
        var banner = document.createElement('div');
        banner.innerHTML = `
            <div style="
                background: linear-gradient(90deg, #4CAF50, #2196F3);
                color: white;
                padding: 15px;
                text-align: center;
                font-size: 16px;
                font-weight: bold;
                position: relative;
            ">
                <span>这是通过Foxtable插入的横幅</span>
                <button style="
                    background: white;
                    color: #2196F3;
                    border: none;
                    padding: 5px 10px;
                    margin-left: 15px;
                    cursor: pointer;
                    border-radius: 3px;
                " onclick="this.parentElement.parentElement.remove()">
                    关闭
                </button>
            </div>
        `;
        document.body.insertBefore(banner, document.body.firstChild);
    })();
]]>.Value

e.Sender.WebViewer.ExecuteScriptAsync(jsCode) '执行代码

插入的横幅：

示例四

注入函数参考代码：

Dim jsCode As String = <![CDATA[
// 定义函数changeText
window.changeText = function(elementId, newText) {
    var element = document.getElementById(elementId);
    if(element) {
        element.textContent = newText;
        return true;
    }
    return false;
};
// 定义函数changeColor
window.changeColor = function(elementId, color) {
    var element = document.getElementById(elementId);
    if(element) {
        element.style.color = color;
        return true;
    }
    return false;
};
]]>.Value
e.Sender.WebViewer.ExecuteScriptAsync(jsCode) '运行JS代码注入函数
e.Sender.WebViewer.ExecuteScriptAsync("changeText('ht1', '新标题')") '执行注入的函数