如何用JavaScript区分iframe内网站并实现CSS缩放适配？

既然你碰到了跨域限制没法直接读取iframe内部内容的问题，而且只能用前端JS在本地处理，这里有几个可行的思路，你可以根据实际情况尝试：

1. 靠URL特征区分（最靠谱，如果设备有规律的话） #

虽然你说URL是随机局域网地址，但很多设备的管理界面其实会带固定的端口号或者路径后缀——比如一类用80端口，另一类用8080；或者一类路径是/admin，另一类是/dashboard。你可以解析iframe的src属性来抓这些特征：

function shouldScaleIframe(iframeSrc) {
  const url = new URL(iframeSrc);
  // 示例：如果端口是8080，或者路径包含large-ui，就需要缩放
  return url.port === '8080' || url.pathname.includes('/large-ui');
}

// 实际使用
const iframe = document.getElementById('your-iframe');
iframe.onload = function() {
  if (shouldScaleIframe(iframe.src)) {
    // 应用缩放，记得设置原点避免偏移
    iframe.style.transform = 'scale(0.75)';
    iframe.style.transformOrigin = 'top left';
    // 调整iframe尺寸，让缩放后刚好填满容器
    iframe.style.width = `${100 / 0.75}%`;
    iframe.style.height = `${100 / 0.75}%`;
  }
};

优点：完全绕开跨域限制，逻辑简单又可靠；缺点：得依赖设备URL有可识别的固定规律，如果完全随机没特征，这个方法就用不了。

2. 通过容器滚动状态判断（适合无URL规律的情况） #

尺寸过大的网站嵌入固定尺寸的容器后，大概率会触发滚动条。你可以给iframe套个固定尺寸的父容器，等iframe加载完后，检查容器的滚动尺寸和可视尺寸的差异：

<!-- 先给iframe套一个固定尺寸的容器 -->
<div id="iframe-container" style="width: 1024px; height: 768px; overflow: hidden; position: relative;">
  <iframe id="target-iframe" src="http://192.168.101.xxx" style="width: 100%; height: 100%; border: none;"></iframe>
</div>

const container = document.getElementById('iframe-container');
const iframe = document.getElementById('target-iframe');

iframe.onload = function() {
  // 加个延迟，确保设备页面完全渲染完毕
  setTimeout(() => {
    // 检查容器是否需要横向/纵向滚动
    const hasHorizontalOverflow = container.scrollWidth > container.clientWidth;
    const hasVerticalOverflow = container.scrollHeight > container.clientHeight;
    
    if (hasHorizontalOverflow || hasVerticalOverflow) {
      // 应用缩放配置
      iframe.style.transform = 'scale(0.75)';
      iframe.style.transformOrigin = 'top left';
      // 调整iframe本身的尺寸，让缩放后的内容刚好填满容器
      iframe.style.width = `${1024 / 0.75}px`;
      iframe.style.height = `${768 / 0.75}px`;
    }
  }, 500); // 延迟时间可以根据设备加载速度调整，比如改成1000ms
};

优点：不依赖URL规律，纯前端就能判断；缺点：受设备加载速度影响，延迟时间得调合适，而且如果正常网站偶尔也会出现滚动条，可能会误判。

3. 备选：尝试利用跨域异常捕获（仅适用于特殊情况） #

虽然跨域下没法直接访问iframe的document，但你可以试试用try-catch读取一些属性——比如如果某类设备的网站刚好允许跨域（比如设置了CORS头），你就能直接拿到页面的实际尺寸：

iframe.onload = function() {
  try {
    const innerWidth = iframe.contentWindow.innerWidth;
    // 如果页面宽度超过容器宽度，就缩放
    if (innerWidth > container.clientWidth) {
      // 应用缩放逻辑
    }
  } catch (e) {
    // 跨域报错，说明没法直接读取， fallback到前面的方法
  }
};

不过这个方法实用性不强，毕竟你没法修改设备网站的CORS设置，所以只能作为备选。

最后提醒下：设置transform: scale()的时候，一定要加transformOrigin: top left，不然缩放会以iframe中心为原点，导致内容偏移；同时调整iframe的宽高是为了让缩放后的内容刚好填满容器，避免留白或者滚动条。

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