跨站widget开发PHP返回同步JS出现Illegal token错误如何解决

问题根源 #

你遇到的语法错误属于JS语法限制：普通单引号/双引号包裹的JS字符串不允许直接包含未转义的换行符。你对PHP代码做换行、缩进排版时，这些格式字符会被PHP直接输出到response变量的字符串值中，JS引擎解析代码时还没等到执行逻辑，就会因为字符串中出现未转义换行直接抛出语法错误，这也是你之前写的JS字符替换逻辑无效的原因——替换代码还没运行，解析阶段就已经报错了。

解决方案（适配你的需求，无需AJAX，仅用PHP即可实现） #

两个方案都基于PHP的json_encode函数实现，该函数会自动处理所有特殊字符（换行、制表符、引号、中文等），输出内容本身就是合法的JS字符串格式，无需手动加引号，也不需要额外做转义处理，完全避免JS语法错误。

方案1：使用输出缓冲区+json_encode（最适合需要排版PHP模板的场景） #

你可以随意在PHP代码块中换行、缩进，所有输出内容会被自动处理为合法JS字符串：

function initialise() { 
    var container = 'widget'; 
    var ele = document.getElementById( container );
    
    var response = <?php
    // 开启输出缓冲区捕获HTML内容
    ob_start();
    ?>
    <!-- 以下PHP模板代码可以随意换行、缩进 -->
    <?php foreach( $this->get( 'api:bestsellers' ) as $record ): ?>
        <p><?php echo $record->get( 'title' ); ?>, <?php echo $record->get( 'format_price' ); ?></p><br>
    <?php endforeach; ?>
    <?php
    // 获取缓冲区内容并清空
    $html = ob_get_clean();
    // 输出为合法JS字符串
    echo json_encode($html);
    ?>;

    ele.innerHTML = response;
}

方案2：拼接HTML变量后转义输出 #

如果你习惯用PHP拼接HTML内容，直接把拼接结果丢给json_encode即可：

function initialise() { 
    var container = 'widget'; 
    var ele = document.getElementById( container );
    
    var response = <?php
    $html = '';
    foreach( $this->get( 'api:bestsellers' ) as $record ) {
        $html .= "<p>". $record->get('title') .", ". $record->get('format_price') ."</p><br>";
    }
    echo json_encode($html);
    ?>;

    ele.innerHTML = response;
}

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