iframe内jQuery覆盖主页面JS致报错，如何阻止冲突？

这个问题我之前也踩过坑，slim版jQuery砍掉了ajax、effects这些核心模块也就算了，还不小心污染主页面的全局jQuery环境，确实挺头疼的。咱们一步步来解决：

既然主页面已经加载了完整的jQuery，同域的iframe完全可以直接复用它，根本不需要再引入slim版。你可以先预处理myhtmlcode，把里面引入jquery-3.3.1.slim.min.js的<script>标签删掉。之后在iframe的脚本里，通过父页面的上下文调用jQuery：

// iframe内的脚本可以这么写
var $ = parent.jQuery;
// 之后正常使用$即可，$.ajax这类方法完全不受影响
$.ajax({
  url: '/api/data',
  success: function(res) { /* ... */ }
});

这种方式既省了一次资源请求，又从根源上避免了版本冲突。

如果没办法修改iframe的HTML内容（比如内容是第三方返回的），可以让主页面的jQuery主动让出全局控制权，换个专属变量使用：

// 主页面加载完jquery.min.js后立刻执行
var $main = jQuery.noConflict(true);

之后主页面里所有依赖jQuery的代码，都换成$main调用，比如$main.ajax(...)、$main('#target-element').hide()。这样就算iframe里的slim版覆盖了全局的$和jQuery，也不会影响你主页面的完整版本。

你之前用sandbox无效，大概率是配置时机或参数不对。sandbox的核心是限制iframe的权限，要阻止它污染主页面全局，关键是不要设置allow-same-origin——这样iframe会被浏览器当成跨域环境，它的脚本无法访问主页面的window对象，自然没法覆盖主页面的jQuery。如果iframe需要执行自身脚本，记得加上allow-scripts：

<!-- 先给iframe配置正确的sandbox属性 -->
<iframe id="modal-html" sandbox="allow-scripts"></iframe>

然后要在iframe加载完成后再设置内容，确保sandbox生效：

$('#modal-html').on('load', function() {
  $(this).contents().find('body').html(myhtmlcode);
});
// 触发iframe加载（初始为空时，设为about:blank触发load事件）
$('#modal-html').attr('src', 'about:blank');

这样iframe的脚本会被限制在自己的隔离环境里，完全碰不到主页面的全局变量。

有些第三方脚本会故意把变量挂载到top或parent对象上（比如top.$ = ...），这种情况就算隔离环境也可能出问题。你可以打开浏览器开发者工具，搜索top.$或parent.$，如果有这类代码，直接删掉或者改成使用iframe自身的变量即可。

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