同域下嵌入指定网页div并保证源页JS脚本正常运行的方案咨询

你现有方法无效的核心原因有两点：

1. 仅提取了目标DOM的结构内容，源图库页面中负责交互的JS脚本没有被同步引入当前页面
2. 即使手动引入了脚本，若原有脚本是在页面加载完成阶段绑定的事件，后续动态插入的DOM不会被自动绑定对应交互

方案1：公共脚本抽离+事件委托（最推荐，长期维护成本最低） #

将图库页的所有交互逻辑抽为独立公共JS文件，所有事件绑定改为事件委托模式，不需要绑定到具体DOM元素，自动适配后续动态插入的内容。

操作步骤： #

1. 抽离图库交互逻辑为gallery.js，修改原有事件绑定写法：

// 原有直接绑定的写法（不支持动态DOM）
// $('.color-btn').click(function() { /* 变色逻辑 */ })
// 改为事件委托写法，支持任意时机插入的匹配元素
$(document).on('click', '.color-btn', function() {
  // 原有变色逻辑不变
})
$(document).on('click', '.angle-switch', function() {
  // 原有角度切换逻辑不变
})

2. 在需要嵌入图库的页面提前引入该公共JS，再用原有方法插入DOM即可：

<script src="/公共路径/gallery.js"></script>
<div id="mylocaldiv"></div>
<script>
$("#mylocaldiv").load("/gallery/ #divtoshow");
</script>

方案2：iframe锚点嵌入（零修改原有图库代码） #

同域场景下用iframe加载图库页对应锚点，可完全保留源页面的脚本运行环境，不需要修改原有任何代码。

<iframe id="galleryFrame" src="/gallery/#divtoshow" frameborder="0" width="100%"></iframe>
<script>
$('#galleryFrame').on('load', function() {
  const iframeDom = this.contentWindow.document;
  // 隐藏图库页不需要的公共模块（如导航、底部）
  $(iframeDom).find('header, footer, .sidebar').hide();
  // 自动适配iframe高度，避免滚动条
  this.style.height = iframeDom.documentElement.scrollHeight + 'px';
})
</script>

方案3：同步提取源页面脚本执行 #

如果不需要频繁嵌入，可在AJAX获取页面内容时，手动提取并执行源页面的所有脚本：

$.ajax({
  url:'/gallery/',
  type:'GET',
  success: function(data){
    // 插入目标DOM
    $('#mylocaldiv2').html($(data).find('#divtoshow').prop('outerHTML'));
    // 提取并执行源页面所有脚本
    $(data).filter('script').each(function() {
      const newScript = document.createElement('script');
      if(this.src) {
        newScript.src = this.src;
      } else {
        newScript.innerText = this.innerText;
      }
      document.body.appendChild(newScript);
    })
  }
});

注意该方案存在重复绑定事件、全局变量冲突的风险，仅适合单场景临时使用。

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