如何让iframe中外部页面的隐藏div加载时自动显示？技术问询

嘿，这个需求完全可以实现！咱们先搞清楚之前代码没生效的可能原因，再给出靠谱的解决方案：

为什么你之前的代码没起作用？ #

1. 选择器错误：原链接的class是this-link，但你用了.change作为选择器，根本找不到目标元素，自然不会生效。
2. 执行时机不对：第三方widget大概率是异步加载的，你的JS代码可能在widget的DOM元素还没渲染出来时就执行了，同样找不到元素。
3. Knockout.js绑定的影响：原代码用了data-bind="fadeVisible: !isVisible(), click: change"，这是Knockout.js的双向绑定语法，直接修改CSS样式会被Knockout的绑定逻辑覆盖，必须从ViewModel层面入手。

解决方案分两种情况处理： #

情况1：widget基于Knockout.js开发（从代码看大概率是）

这种情况直接操作ViewModel的属性最可靠，不会和框架的绑定逻辑冲突：

// 用MutationObserver监听widget元素加载，避免异步加载导致找不到DOM
const observer = new MutationObserver((mutations) => {
  const changeLink = document.querySelector('.this-link');
  if (changeLink) {
    observer.disconnect(); // 找到元素后停止监听
    
    // 获取链接对应的Knockout ViewModel
    const viewModel = ko.dataFor(changeLink);
    if (viewModel && viewModel.isVisible) {
      // 初始设置isVisible为false，这样!isVisible()为true，让日期选择器div显示
      viewModel.isVisible(false);
      
      // 重写click事件逻辑：点击链接时设置isVisible为true，隐藏div并显示链接
      viewModel.change = function() {
        this.isVisible(true);
      };
      
      // 强制更新绑定，确保修改生效
      ko.applyBindings(viewModel, changeLink);
      
      // 初始隐藏Change链接
      changeLink.style.display = 'none';
    }
  }
});

// 监听整个文档的子树变化，直到找到目标链接
observer.observe(document.body, { childList: true, subtree: true });

情况2：widget没有用框架，纯原生JS实现

如果是纯原生的，直接操作DOM元素即可，但同样要确保元素加载完成：

document.addEventListener('DOMContentLoaded', () => {
  // 用setTimeout处理可能的异步加载延迟，或者用上面的MutationObserver更稳妥
  setTimeout(() => {
    const changeLink = document.querySelector('.this-link');
    const datePickerDiv = document.getElementById('mydiv'); // 替换成实际的日期选择器div选择器
    
    if (changeLink && datePickerDiv) {
      // 初始显示日期选择器，隐藏链接
      datePickerDiv.style.display = 'block';
      changeLink.style.display = 'none';
      
      // 绑定点击事件：点击链接时隐藏div，显示链接
      changeLink.addEventListener('click', (e) => {
        e.preventDefault();
        datePickerDiv.style.display = 'none';
        changeLink.style.display = 'inline';
      });
    }
  }, 500); // 延迟时间可以根据实际加载情况调整
});

关键注意点： #

• 确认日期选择器div的正确选择器（比如ID或class），替换代码里的占位符。
• MutationObserver比setTimeout更可靠，能精准监听元素加载，避免延迟时间设置不合理的问题。

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