R Shiny iframe嵌入页面自定义消息处理报Shiny未定义错误

报错核心原因和自定义消息写法规范无关，全部是环境隔离和通信逻辑的基础问题：

• 浏览器中iframe是完全独立的浏览上下文，和父页面的JS全局作用域严格隔离，受同源安全策略限制，父页面加载的Shiny客户端脚本不会自动注入到iframe内的页面。你在iframe加载的独立HTML中没有引入Shiny相关依赖，自然拿不到Shiny全局对象，直接抛出未定义错误。
• 你把所有逻辑都绑定在shiny:connected事件回调中，因为iframe内根本没有初始化Shiny连接，这个事件永远不会触发，所以控制台看不到任何你写的日志输出。
• Shiny默认的session$sendCustomMessage只会向当前父页面的Shiny客户端实例发消息，不会自动穿透iframe屏障，就算你在iframe里引入Shiny JS、注册了消息处理器，也收不到父页面发的消息。

另外代码还有几个隐性bug：

• shinyjs::useShinyjs()必须放在UI端声明，写在Server端完全不生效
• 调用doUpdate()时没有传入消息参数，就算收到消息也无法把值赋值给urlToBase64PDF
• 多处使用document.write()输出变量，会直接覆盖整个页面DOM，冲掉Adobe PDF阅读器的渲染容器
• 没有在HTML中引入Adobe DC View的SDK脚本，后续会抛出AdobeDC is not defined错误
• 把index.js放在head中引入，执行时页面DOM还没加载完成，会找不到PDF渲染的容器节点

1. 调整iframe页面的HTML结构 #

修正脚本引入顺序，补全缺失的依赖，把业务JS移到body末尾引入，避免DOM加载时序问题：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 补全Adobe DC SDK依赖 -->
    <script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
</head>
<body>
    <!-- PDF渲染容器 -->
    <div id="adobe-dc-view" style="width: 100%; height: 580px;"></div>
    <!-- 业务脚本移到DOM加载完成后引入 -->
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

2. 重写iframe内的index.js逻辑 #

放弃直接在iframe内注册Shiny消息处理器的方案，改用浏览器原生postMessage接收父页面转发的消息，删掉所有无效的document.write和shiny:connected绑定：

const clientID = "e800d12fc12c4d60960778b2bc4370af";
let urlToBase64PDF;
let adobeSDKReady = false;

// 监听父页面通过postMessage转发的Shiny消息
window.addEventListener('message', function(e) {
  // 简单校验消息格式，避免接收无关的postMessage
  if (e.data?.msgType === 'shiny_custom_msg' && e.data.handler === 'handler1') {
    console.log("收到Shiny侧发送的消息：", e.data.payload);
    urlToBase64PDF = e.data.payload;
    // 收到消息且SDK加载完成就触发PDF渲染
    if (adobeSDKReady) renderPDF();
  }
})

function base64ToArrayBuffer(base64) {
  const bin = window.atob(base64);
  const len = bin.length;
  const uInt8Array = new Uint8Array(len);
  for (let i = 0; i < len; i++) {
    uInt8Array[i] = bin.charCodeAt(i);
  }
  return uInt8Array.buffer;
}

function renderPDF() {
  if (!urlToBase64PDF) return;
  const adobeDCView = new AdobeDC.View({clientId: clientID, divId: "adobe-dc-view"});
  adobeDCView.previewFile(
    {
      content: { promise: Promise.resolve(base64ToArrayBuffer(urlToBase64PDF)) },
      metaData: {fileName: "check.pdf"}
    },
    {}
  );
}

// 监听Adobe SDK加载完成事件
document.addEventListener("adobe_dc_view_sdk.ready", function() {
  adobeSDKReady = true;
  // SDK加载完成且已经拿到消息就直接渲染
  if (urlToBase64PDF) renderPDF();
});

3. 调整Shiny端代码 #

把shinyjs依赖放到UI端，增加消息转发逻辑，把Shiny侧的自定义消息通过postMessage转发给iframe：

app_ui <- function() {
  shiny::addResourcePath(
    'www', system.file('app/www', package = 'test')
  )

  shiny::tagList(
    # shinyjs依赖必须在UI端声明
    shinyjs::useShinyjs(),
    # 给iframe加ID，方便获取DOM节点
    tags$iframe(
      id = "pdf_iframe",
      src = "www/index.html",
      height = 600,
      width = 600
    ),
    # 父页面监听Shiny自定义消息，转发给iframe
    tags$script(HTML("
      Shiny.addCustomMessageHandler('handler1', function(payload) {
        const iframe = document.getElementById('pdf_iframe');
        // 等iframe加载完成后再发消息
        iframe.onload = function() {
          iframe.contentWindow.postMessage({
            msgType: 'shiny_custom_msg',
            handler: 'handler1',
            payload: payload
          }, '*');
        }
      })
    "))
  )
}

Server端代码只需要保留发消息逻辑即可，不需要其他改动：

app_server <- function(input, output, session){
  message1 = "test"
  session$sendCustomMessage("handler1", message1)
}

生产环境使用时建议把postMessage的targetOrigin从*改成你自己的应用域名，避免安全风险。

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