如何使用JavaScript编辑iframe内部HTML以构建SalesForce邮件模板

前置检查 #

首先确认iframe和父页面属于同源（同协议、同域名、同端口），SalesForce内置的邮件编辑器iframe默认符合同源要求，不会有跨域访问限制。 #

定位iframe并获取内部文档对象 #

你可以通过id、name、title等属性定位到iframe元素，再通过兼容IE的写法获取iframe内部的文档对象：

// 替换选择器为你实际场景中iframe的匹配规则，比如按title、id匹配
var targetIframe = document.querySelector('iframe[id="emailEditorIframe"]');
// 兼容IE的iframe文档获取写法
var iframeDoc = targetIframe.contentDocument || targetIframe.contentWindow.document;

如果页面有多个iframe无法通过单一属性定位，可以遍历所有iframe匹配特征：

var allIframes = document.getElementsByTagName('iframe');
var targetIframe;
for(var i=0; i<allIframes.length; i++){
  // 替换判断逻辑为你实际的特征，比如src包含固定路径、title包含「邮件」关键词
  if(allIframes[i].title.indexOf('邮件') > -1){
    targetIframe = allIframes[i];
    break;
  }
}

如果不知道怎么找iframe的匹配规则，可以在IE的开发者工具中右键邮件编辑区域，选择「检查元素」，向上回溯找到外层的iframe标签，复制它的id、name或者唯一的属性特征来写选择器。 #

切换焦点到iframe #

调用iframe对应窗口的focus方法即可：

targetIframe.contentWindow.focus();

编辑iframe内的富文本内容 #

SalesForce的邮件编辑器iframe内部一般是开启了contenteditable的body节点，直接修改其innerHTML即可插入你组装好的HTML模板：

// 替换为你已经拼接好变量的HTML模板内容
var customEmailTemplate = '<div style="font-family:微软雅黑;font-size:14px;">' +
  '<p>尊敬的客户您好：</p>' +
  '<p>这里是邮件正文内容</p>' +
  '<p>此致</p>' +
  '<p>XX公司团队</p>' +
'</div>';
iframeDoc.body.innerHTML = customEmailTemplate;

Blue Prism调用注意事项 #

• 执行上述JS前需要先确保iframe已经完全加载完成，你可以在Blue Prism中加1-2秒的等待步骤，避免出现空对象报错。
• 如果单次执行失败，可以加3次以内的重试逻辑，避免IE渲染延迟导致的操作失效。

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