Google Books API嵌入视图报错：google.books.load不是函数（AngularJS）

核心问题分析 #

你遇到的错误本质是Google Books API脚本未完成加载就调用了相关方法——动态添加脚本是异步过程，脚本还没下载解析完成时，google对象根本不存在，自然会触发报错。结合你只能修改custom.js且使用AngularJS的场景，以下是具体解决方案：

1. 正确异步加载API脚本并等待就绪 #

动态添加脚本时必须监听onload事件，确保脚本加载完成后再初始化API和创建视图。把代码放到AngularJS的模块生命周期中（比如run块），避免全局作用域的执行时机问题：

// 替换成网站实际的Angular模块名，若不确定可在控制台运行angular.element(document).injector()查看
angular.module('libraryApp').run(function() {
    // 动态创建Google Books API脚本标签
    const script = document.createElement('script');
    script.src = 'https://www.google.com/books/api.js';
    script.type = 'text/javascript';

    // 脚本加载完成后执行初始化逻辑
    script.onload = function() {
        // 初始化Books API
        google.books.load();
        // API就绪后加载固定ISBN的图书视图
        loadFixedIsbnBook('9781451648546');
    };

    // 将脚本插入页面头部
    document.querySelector('head').appendChild(script);
});

// 封装图书视图初始化函数
function loadFixedIsbnBook(isbn) {
    // 创建承载视图的容器div
    const viewerContainer = document.createElement('div');
    viewerContainer.id = 'google-book-viewer';
    viewerContainer.style.width = '600px';
    viewerContainer.style.height = '800px';

    // 把容器插入页面合适位置，比如页面中已有的内容容器（替换成实际元素选择器）
    document.querySelector('.library-content-area').appendChild(viewerContainer);

    // 加载指定ISBN的图书
    const viewer = new google.books.DefaultViewer(document.getElementById('google-book-viewer'));
    viewer.load(`ISBN:${isbn}`);
}

2. 排查常见问题 #

• 脚本加载失败：打开浏览器开发者工具的「Network」标签，检查https://www.google.com/books/api.js的加载状态（需为200）。如果加载失败，可能是图书馆网站的内容安全策略(CSP) 限制了外部脚本，需要联系管理员调整。
• Angular模块名错误：如果控制台报错module not found，用angular.element(document).injector().get('$rootScope')在控制台执行，查看网站实际使用的Angular模块名。
• 控制台测试时机：之前控制台调用报错是因为脚本未加载完成，需等页面加载完成且API脚本加载成功后，再在控制台执行google.books.load()或相关方法。

3. 后续扩展（动态获取图书标识符） #

等固定ISBN功能正常后，可通过DOM选择器从页面元素中提取图书ID/ISBN，比如：

// 假设页面中图书ISBN存放在class为'book-isbn'的元素中
const targetIsbn = document.querySelector('.book-isbn').textContent.trim();
loadFixedIsbnBook(targetIsbn);

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