如何从父文档访问iframe内的Summernote实例并控制其启用禁用？

问题原因 #

父文档与iframe属于独立的全局执行上下文：

• 父文档中的jQuery实例并未加载Summernote插件，即便通过contents().find()获取到iframe内的DOM元素，调用的仍是父上下文里的jQuery方法，自然找不到.summernote()；
• 浏览器控制台查看元素时，默认会切换到该元素所属的iframe上下文，所以能看到注册的Summernote实例，但这和父文档的执行环境无关。

解决方案 #

方法1：直接调用iframe上下文的jQuery与Summernote #

通过获取iframe的window对象，使用其内部的jQuery实例来操作Summernote（要求父文档与iframe同域）：

// 获取iframe的window对象
const iframeWindow = document.getElementById('iframeid').contentWindow;
// 调用iframe内的Summernote方法
iframeWindow.$('#mysummernoteid').summernote('disable');
// 启用则替换为：
// iframeWindow.$('#mysummernoteid').summernote('enable');

注意：需确保iframe已加载完成，可通过监听load事件避免操作时机过早：

const iframe = document.getElementById('iframeid');
iframe.addEventListener('load', function() {
  this.contentWindow.$('#mysummernoteid').summernote('disable');
});

方法2：在iframe内部暴露控制方法（更推荐） #

在iframe页面中定义全局方法，父文档直接调用该方法来控制Summernote，避免直接侵入iframe内部DOM结构：

1. iframe页面代码：

// 暴露全局控制方法
window.controlSummernote = function(action) {
  $('#mysummernoteid').summernote(action);
};

2. 父文档调用：

document.getElementById('iframeid').contentWindow.controlSummernote('disable');
// 启用则传'enable'

方法3：通过跨上下文消息触发（兼容跨域场景） #

如果父文档与iframe不同域，可使用postMessage传递控制指令：

1. iframe页面监听消息：

window.addEventListener('message', function(e) {
  // 生产环境建议验证消息来源域名，提升安全性
  if (e.data.type === 'summernote-control') {
    $('#mysummernoteid').summernote(e.data.action);
  }
});

2. 父文档发送消息：

const iframe = document.getElementById('iframeid');
iframe.contentWindow.postMessage({
  type: 'summernote-control',
  action: 'disable'
}, '*'); // 生产环境替换为iframe的具体域名

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