如何在PhantomJS中引入多个JavaScript脚本？求可行示例及报错解决

看起来你遇到的核心问题是异步脚本加载的顺序控制，再加上代码里的语法小错误，导致textillate没有正确加载，才会出现undefined is not a constructor的报错。我来帮你梳理问题并给出可行的解决方案：

错误原因分析 #

1. 语法冗余：你嵌套includeJS时多了不必要的括号，导致代码执行逻辑混乱，textillate脚本可能根本没被正确触发加载。
2. 依赖顺序问题：textillate完全依赖jQuery，必须确保jQuery加载完成后再加载textillate，否则它无法绑定到jQuery的原型链上，自然会提示未定义。
3. 本地脚本加载方式错配：如果jquery.textillate.js是本地文件，应该用page.injectJS()而非page.includeJS()——后者专门用于加载远程URL资源。

可行解决方案：递归批量加载脚本 #

我们可以写一个递归函数，依次加载所有需要的脚本，确保前一个脚本加载完成后再启动下一个，完美解决异步顺序问题。

完整示例代码 #

var page = require('webpage').create();

// 定义批量加载脚本的递归函数
function loadScripts(page, scripts, callback) {
    if (scripts.length === 0) {
        // 所有脚本加载完成，执行后续逻辑
        callback();
        return;
    }

    var currentScript = scripts.shift();
    if (currentScript.startsWith('http://') || currentScript.startsWith('https://')) {
        // 远程脚本用includeJS异步加载
        page.includeJs(currentScript, function() {
            console.log('✅ 远程脚本加载完成:', currentScript);
            loadScripts(page, scripts, callback);
        });
    } else {
        // 本地脚本用injectJS同步加载
        var isInjected = page.injectJS(currentScript);
        if (isInjected) {
            console.log('✅ 本地脚本注入完成:', currentScript);
            loadScripts(page, scripts, callback);
        } else {
            console.error('❌ 本地脚本加载失败，请检查路径:', currentScript);
            phantom.exit(1);
        }
    }
}

page.open('index.html', function(openStatus) {
    console.log("页面打开状态: " + openStatus);
    if (openStatus === 'success') {
        // 按依赖顺序排列脚本：先加载jQuery，再加载textillate
        var scriptsToLoad = [
            'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js',
            'jquery.textillate.js' // 确保这个文件和你的PhantomJS脚本在同一目录，或者用绝对路径
        ];

        loadScripts(page, scriptsToLoad, function() {
            console.log('🎉 所有脚本加载完成，开始执行页面逻辑');
            page.evaluate(function() {
                var tag = document.getElementById("main-tag");
                if (!tag) {
                    console.error('❌ 未找到id为main-tag的元素');
                    return;
                }
                tag.innerHTML = "Hello World";

                // 先检查textillate是否已加载，避免报错
                if (typeof $.fn.textillate === 'function') {
                    tag.textillate({
                        maxDisplayTime: 2000,
                        in: {
                            effect: 'fadeInUp',
                            delay: 7000
                        }
                    });
                    console.log('✅ Textillate动画已应用到元素');
                } else {
                    console.error('❌ Textillate脚本未正确加载');
                }
            });

            // 等待动画完成后再退出（根据你的delay设置，这里设为8秒）
            setTimeout(function() {
                // 可选：截图保存结果
                page.render('textillate_result.png');
                console.log('✅ 任务完成，退出PhantomJS');
                phantom.exit();
            }, 8000);
        });
    } else {
        console.error('❌ 页面打开失败');
        phantom.exit(1);
    }
});

关键说明 #

• 脚本顺序优先级：必须把依赖项（比如jQuery）放在前面，保证后续脚本能找到依赖对象。
• 本地脚本路径：如果jquery.textillate.js不在当前执行目录，一定要写绝对路径（比如/home/user/scripts/jquery.textillate.js）。
• 存在性检查：在page.evaluate()里先判断$.fn.textillate是否存在，能有效避免未定义错误。
• 异步等待：因为textillate有延迟动画，所以需要用setTimeout等待动画完成后再退出PhantomJS，否则可能看不到最终效果。

另一种方案：使用Promise封装（适用于新版本PhantomJS） #

如果你的PhantomJS版本支持ES6 Promise，可以用Promise链式调用让代码更清晰：

var page = require('webpage').create();

function loadScript(page, script) {
    return new Promise(function(resolve, reject) {
        if (script.startsWith('http')) {
            page.includeJs(script, function() {
                resolve(script);
            });
        } else {
            var success = page.injectJS(script);
            success ? resolve(script) : reject(new Error('加载失败: ' + script));
        }
    });
}

page.open('index.html', function(openStatus) {
    if (openStatus === 'success') {
        loadScript(page, 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js')
            .then(function() {
                return loadScript(page, 'jquery.textillate.js');
            })
            .then(function() {
                page.evaluate(function() {
                    // 执行页面逻辑...
                });
                setTimeout(function() {
                    phantom.exit();
                }, 8000);
            })
            .catch(function(err) {
                console.error(err);
                phantom.exit(1);
            });
    }
});

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