dsh-design-studio 0.9.0 → 0.11.0

package/lib/picker.js

@@ -36,6 +36,9 @@
     s.textContent = '*{scrollbar-width:none}*::-webkit-scrollbar{display:none}'
     ;(document.head || document.documentElement).appendChild(s)
   }
+  // 别人做的设计（设计库来的、没改过）：服务端在脚本标签上标了 data-strict（远程看时在 cfg 里）。
+  // 点站外链接不跳（页面本来就跑不了脚本、交不出表单，这里再挡住「点一下跳到别的网站」），告诉右侧栏拦下了
+  const STRICT = !!cfg.strict || !!(document.currentScript && document.currentScript.getAttribute('data-strict') === '1')
   const SEED_KEY = '__dsh_design_seed__'
   // 远程看（右侧栏把这一屏打包放进沙盒 iframe 的 srcdoc，location 是 about:srcdoc）：这一屏原本的地址由右侧栏给
   const HERE = cfg.remote && typeof cfg.href === 'string' ? cfg.href : ''
@@ -58,6 +61,80 @@
     }
   }
 
+  // 拖着文件进了这一页（页面铺满右侧栏时，外面的右侧栏收不到拖动）：告诉右侧栏亮出「松开打开 / 当参考图」的提示，
+  // 松手也在这里接住、把文件转给右侧栏。提示只是一层画、不挡事件：页面自己的上传区照样收得到后面的拖动
+  // 页面自己里面拖的（拖一下页面上的图、页面自己的拖放）不算：那不是要打开什么
+  // 用 drag 不用 dragstart：页面取消了 dragstart（轮播图常这么做）就不会有 drag，也就不会有 dragend 来清掉标记
+  let ownDrag = false
+  let dropOwn = false
+  addEventListener('drag', () => { ownDrag = true }, true)
+  addEventListener('dragend', () => { ownDrag = false }, true)
+  addEventListener('pointerup', () => { ownDrag = false }, true)
+  const hasFiles = (dt) => !!dt && [...(dt.types || [])].includes('Files')
+  // 页面自己接这次拖动：上传区在 dragover 上 preventDefault（或者拦住不让冒泡，见下面捕获阶段那个），或者落在 <input type=file> 上
+  const pageTakes = (e) => e.defaultPrevented || (typeof e.composedPath === 'function' ? e.composedPath() : [e.target]).some((n) => n && n.tagName === 'INPUT' && String(n.type).toLowerCase() === 'file')
+  let lastIn = 0
+  let took = false // 刚才那下是页面自己接的：收起提示，松手也归页面
+  const seen = new WeakSet() // 冒泡阶段见到过的 dragover（按事件记：页面忙时几个 dragover 会连着处理）
+  const pageTook = () => {
+    if (took) return
+    took = true
+    lastIn = 0
+    post({ type: 'dragOut' })
+  }
+  // 只看 dragover：同一个元素上拖第二次时浏览器不一定再给 dragenter；dragenter 时也还不知道页面接不接
+  // 挂在 window 冒泡阶段的最后，页面的处理先跑完；页面全局拦了 dragover 防误拖的就当页面接了（那种页面用「浏览…」或地址栏打开）
+  const onOver = (e) => {
+    seen.add(e)
+    const dt = e.dataTransfer
+    if (ownDrag || !hasFiles(dt)) return
+    if (pageTakes(e)) return pageTook()
+    took = false
+    e.preventDefault() // 这里能松手：不然浏览器把文件当网页打开（或者根本不给 drop）
+    dt.dropEffect = 'copy'
+    const now = Date.now()
+    if (now - lastIn < 200) return // 拖着时 dragover 一直来，隔一会儿报一次就够
+    lastIn = now
+    post({ type: 'dragIn', items: [...(dt.items || [])].slice(0, 20).map((x) => ({ kind: String(x.kind), type: String(x.type) })) })
+  }
+  const onDrop = (e) => {
+    const dt = e.dataTransfer
+    const own = dropOwn
+    dropOwn = false
+    if (own || !hasFiles(dt)) return
+    if (took || pageTakes(e)) { took = false; return }
+    e.preventDefault()
+    const files = []
+    for (const x of [...(dt.items || [])].slice(0, 20)) {
+      if (x.kind !== 'file') continue
+      // 文件夹只有 entry 分得出来，得在 drop 里同步取
+      let dir = false
+      try { const en = typeof x.webkitGetAsEntry === 'function' ? x.webkitGetAsEntry() : null; dir = !!(en && en.isDirectory) } catch { dir = false }
+      let f = null
+      try { f = x.getAsFile() } catch { f = null }
+      if (f) files.push({ f, dir })
+    }
+    // File 能直接跟着消息过去（桌面版照样拿得到它的真实路径）
+    post({ type: 'dropIn', files })
+  }
+  // 页面在 window 上挂的整页上传常常比这里晚注册（type=module 的脚本、框架挂载后）：每次事件在捕获阶段把上面两个摘下来重挂，
+  // 排到 window 冒泡监听的最后，页面的处理（不管什么时候挂的）都先跑完，才看它接没接。
+  // 重挂放在 document 的捕获阶段：window 捕获阶段的监听（页面的也算）都跑过了才轮到它
+  const last = (type, fn) => { removeEventListener(type, fn); addEventListener(type, fn) }
+  last('dragover', onOver)
+  last('drop', onDrop)
+  document.addEventListener('dragover', () => last('dragover', onOver), true)
+  document.addEventListener('drop', () => last('drop', onDrop), true)
+  addEventListener('dragover', (e) => {
+    if (ownDrag || !hasFiles(e.dataTransfer)) return
+    // 上传区拦住 dragover 不让冒泡（stopPropagation）时上面那个收不到：这一轮事件发完还没见到它，就是页面接了
+    setTimeout(() => { if (!seen.has(e)) pageTook() }, 0)
+  }, true)
+  addEventListener('drop', () => {
+    dropOwn = ownDrag
+    ownDrag = false
+  }, true)
+
   // ── 描述一个元素 ──────────────────────────────────────────────────────────
 
   const esc = (s) => (window.CSS && CSS.escape ? CSS.escape(s) : String(s).replace(/[^\w-]/g, '\\$&'))
@@ -107,7 +184,7 @@
     }
     const full = el.outerHTML.replace(/\s+/g, ' ')
     if (full.length <= max) return full
-    const open = shallow.outerHTML.replace(/<\/[^>]+>$/, '')
+    const open = shallow.outerHTML.replace(/<\/[^>]+>$/, '').replace(/\s+/g, ' ')
     const kids = el.children.length
     const txt = textOf(el)
     const inner = kids ? ` …${kids} 个子元素… ` : clip(txt, 60)
@@ -1188,6 +1265,36 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     post({ type: 'links', links })
   }
 
+  if (STRICT) {
+    const offsite = (raw) => {
+      const v = String(raw || '').trim()
+      if (!v || v.startsWith('#')) return ''
+      let u
+      try { u = new URL(v, here()) } catch { return v.slice(0, 200) }
+      return u.origin === hereUrl().origin ? '' : u.href.slice(0, 200)
+    }
+    addEventListener('click', (e) => {
+      const a = e.target && e.target.closest ? e.target.closest('a[href], area[href]') : null
+      if (!a) return
+      const dl = a.hasAttribute('download')
+      const out = offsite(a.getAttribute('href'))
+      // 下载、开新窗口沙盒本来就不让；站外的地址这里直接挡（带 download 的按「下载」报）
+      if (!out && !dl) return
+      e.preventDefault()
+      e.stopImmediatePropagation()
+      post({ type: 'blocked', href: dl ? 'download' : out })
+    }, true)
+    if (window.navigation && typeof navigation.addEventListener === 'function') {
+      navigation.addEventListener('navigate', (e) => {
+        if (!e.cancelable || e.navigationType === 'traverse') return
+        const out = offsite(e.destination && e.destination.url)
+        if (!out && !e.downloadRequest) return
+        e.preventDefault()
+        post({ type: 'blocked', href: out || 'download' })
+      })
+    }
+  }
+
   // 演示：点了跳页的地方，不在 iframe 里直接跳，告诉右侧栏换一屏（带过场动画）
   // 远程看也是：沙盒里的页面跳不过去（地址指着电脑本机），由右侧栏打包那一页换上来
   let demo = false
@@ -1385,17 +1492,27 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
   const URL_RE = /url\(\s*(['"]?)([^'")]+)\1\s*\)/g
 
   /** 把一段 CSS 值里的 url(...) 都换成 data URL */
-  async function inlineUrls(value, base, inline) {
+  async function inlineUrls(value, base, inline, idp = '') {
     if (!value || value.indexOf('url(') < 0) return value
+    // 指着这一页里的东西（SVG 的渐变、裁剪、滤镜：url(#area)）：留成页内引用，别当文件去下载
+    const page = String(base || '').split('#')[0]
+    const local = new Map()
     const jobs = []
-    value.replace(URL_RE, (m, q, u) => { jobs.push(u); return m })
+    value.replace(URL_RE, (m, q, u) => {
+      if (u.startsWith('#')) local.set(u, '#' + idp + u.slice(1))
+      else {
+        try { const a = new URL(u, base); if (a.hash && a.href.split('#')[0] === page) local.set(u, '#' + idp + a.hash.slice(1)) } catch { /* 怪地址 */ }
+      }
+      if (!local.has(u)) jobs.push(u)
+      return m
+    })
     const map = new Map()
     await Promise.all(jobs.map(async (u) => {
       let abs = u
       try { abs = new URL(u, base).href } catch { /* 原样 */ }
       map.set(u, await inline(abs))
     }))
-    return value.replace(URL_RE, (m, q, u) => (map.get(u) ? `url("${map.get(u)}")` : 'none'))
+    return value.replace(URL_RE, (m, q, u) => (local.has(u) ? `url("${local.get(u)}")` : map.get(u) ? `url("${map.get(u)}")` : 'none'))
   }
 
   function styleText(cs, def, out) {
@@ -1416,7 +1533,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     let text = false
     for (const n of el.childNodes) if (n.nodeType === 3 && n.nodeValue.trim()) { text = true; break }
     if (!text) return false
-    const r = document.createRange()
+    const r = el.ownerDocument.createRange()
     r.selectNodeContents(el)
     const rects = [...r.getClientRects()].filter((x) => x.width && x.height)
     if (!rects.length || rects.length > 40) return false
@@ -1453,6 +1570,24 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     const H = Math.ceil(full ? Math.max(de.scrollHeight, document.body ? document.body.scrollHeight : 0, innerHeight) : innerHeight)
     const box = makeSandbox()
     const inline = makeInliner()
+    // 只截看得到的这一屏（不是整页）：页面滚过、里面的滚动区滚过、有贴住的（sticky）元素，画成图时都得照现在的样子摆
+    const view = !full
+    const stuck = view ? stickyShift(document) : new Map()
+    // 页面滚过时 body 整体往上挪（transform），body 就成了里面固定元素的定位基准：跟着窗口走的固定元素按 body 的位置换算回去，还贴在窗口原来的地方
+    const lift = view && !!(scrollX || scrollY) && !!document.body
+    let bodyAt = null
+    if (lift) {
+      const br = document.body.getBoundingClientRect()
+      const bcs = getComputedStyle(document.body)
+      bodyAt = { l: br.left + (parseFloat(bcs.borderLeftWidth) || 0), t: br.top + (parseFloat(bcs.borderTopWidth) || 0) }
+    }
+    // 怪异模式下 body.scrollTop 就是页面滚动；内嵌页面的根元素滚过（它自己的页面滚动）也照样往回挪
+    // 内嵌页面画的总是它现在看得到的那块：里面的滚动（整页导出时也算）都补
+    const ownScroll = (el) => el.ownerDocument !== document || (view && el !== de && (el !== document.body || document.compatMode === 'CSS1Compat'))
+    // 资源地址按元素所在的那页算（内嵌页面有自己的地址）
+    const baseOf = (el) => { const b = el.ownerDocument.baseURI || ''; return /^https?:/.test(b) ? b : here() }
+    // 子树里还在找定位基准的绝对 / 固定定位（a / f）：滚动区的孩子要是改成相对定位，会把这些绝对定位抢过来（换了基准、还被滚动区裁掉）
+    const openOf = new Map()
     const pseudoRules = []
     const families = new Set()
     const jobs = []
@@ -1487,10 +1622,14 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       return p
     }
 
-    function walk(node) {
+    // ctx：往下传「以哪个滚过的滚动区为定位基准」——a：绝对定位的后代该往回挪多少，f：固定定位的（滚动区有变换时）
+    const NO_SHIFT = { a: [0, 0], f: [0, 0] }
+    const idPre = new Map([[document, '']])
+    function walk(node, ctx = NO_SHIFT) {
       if (node.nodeType === 3) return document.createTextNode(node.nodeValue)
       if (node.nodeType !== 1) return null
       const el = node
+      const idp = idPre.get(el.ownerDocument) || ''
       if (SKIP_TAGS.has(el.tagName.toUpperCase())) return null
       if (el.tagName === 'STYLE' && el.namespaceURI !== SVGNS) return null
       const cs = getComputedStyle(el)
@@ -1508,7 +1647,14 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
         for (const a of el.attributes) {
           if (a.name === 'style' || a.name.startsWith('on') || a.name === 'class' && el.namespaceURI !== SVGNS) continue
           if (a.name === 'srcset' || a.name === 'sizes' || a.name === 'loading') continue
-          try { c.setAttributeNS(a.namespaceURI, a.name, a.value) } catch { /* 怪属性名 */ }
+          let v = a.value
+          // 内嵌页面的 id 和页内引用加上这一页的前缀：几页里同名的渐变、裁剪不会串
+          if (idp) {
+            if (a.name === 'id') v = idp + v
+            else if (/(^|:)href$/.test(a.name) && v.startsWith('#')) v = '#' + idp + v.slice(1)
+            else if (v.indexOf('url(') >= 0) v = v.replace(/url\(\s*(['"]?)#([^'")]+)\1\s*\)/g, (m, q, id) => `url(#${idp}${id})`)
+          }
+          try { c.setAttributeNS(a.namespaceURI, a.name, v) } catch { /* 怪属性名 */ }
         }
       }
       if (el.namespaceURI === SVGNS && el.getAttribute('class')) c.setAttribute('class', el.getAttribute('class'))
@@ -1517,17 +1663,31 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       const def = box.defaults(el)
       let st = styleText(cs, def, withUrls)
       if (el === de) st += 'overflow:hidden;'
+      // iframe / 视频换成了 div：默认的 300×150、行内排列也得写明（和 iframe 默认一样的样式上面省掉了）
+      if (tag === 'IFRAME' || tag === 'VIDEO' || tag === 'OBJECT' || tag === 'EMBED') {
+        st += `display:${cs.display === 'inline' ? 'inline-block' : cs.display};width:${cs.width};height:${cs.height};box-sizing:${cs.boxSizing};vertical-align:${cs.verticalAlign};overflow:hidden;`
+      }
+      // 贴住了：画成图时没有滚动，按量出来的偏移摆回现在的位置
+      if (stuck.has(el)) { const [dx, dy] = stuck.get(el); st += `position:relative;inset:auto;left:${dx}px;top:${dy}px;` }
+      // 以滚过的滚动区为基准的绝对 / 固定定位：跟着内容滚，往回挪（不管隔了几层）
+      const owe = el.namespaceURI === SVGNS ? null : cs.position === 'absolute' ? ctx.a : cs.position === 'fixed' ? ctx.f : null
+      if (owe && (owe[0] || owe[1])) st += shiftCss(cs, owe[0], owe[1])
+      if (lift && cs.position === 'fixed' && el.namespaceURI !== SVGNS && el.ownerDocument === document && document.body.contains(el) && !fixedHeld(el)) {
+        const x = parseFloat(cs.left)
+        const y = parseFloat(cs.top)
+        if (Number.isFinite(x) && Number.isFinite(y)) st += `left:${x - bodyAt.l}px;top:${y - bodyAt.t}px;right:auto;bottom:auto;`
+      }
       // 原来一行放得下的字，画成图时也别折行（宽度是定死的，字体渲染差一丁点就会挤到第二行）
       if (el.namespaceURI !== SVGNS && cs.whiteSpace !== 'nowrap' && oneLine(el)) st += 'white-space:nowrap;'
       c.setAttribute('style', st)
       families.add(cs.fontFamily)
       if (withUrls.length) {
+        // 等图片转好再换进去；换的时候读那一刻的 style（滚动区补的偏移是后来加上的，别盖掉）
+        const vals = withUrls.map((p) => cs.getPropertyValue(p))
         jobs.push((async () => {
+          const done = await Promise.all(vals.map((v) => inlineUrls(v, baseOf(el), inline, idp)))
           let s = c.getAttribute('style')
-          for (const p of withUrls) {
-            const v = cs.getPropertyValue(p)
-            s = s.replace(`${p}:${v};`, `${p}:${await inlineUrls(v, here(), inline)};`)
-          }
+          withUrls.forEach((p, i) => { s = s.replace(`${p}:${vals[i]};`, `${p}:${done[i]};`) })
           c.setAttribute('style', s)
         })())
       }
@@ -1538,12 +1698,12 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       }
       if (el.namespaceURI === SVGNS && el.localName === 'image') {
         const href = el.getAttribute('href') || el.getAttributeNS('http://www.w3.org/1999/xlink', 'href')
-        if (href) jobs.push(inline(new URL(href, here()).href).then((d) => { if (d) c.setAttribute('href', d) }))
+        if (href) jobs.push(inline(new URL(href, baseOf(el)).href).then((d) => { if (d) c.setAttribute('href', d) }))
       }
       if (el.namespaceURI === SVGNS && el.localName === 'use') {
         const href = el.getAttribute('href') || el.getAttributeNS('http://www.w3.org/1999/xlink', 'href') || ''
         let abs = ''
-        try { abs = href && !href.startsWith('#') ? new URL(href, here()).href : '' } catch { /* 怪地址 */ }
+        try { abs = href && !href.startsWith('#') ? new URL(href, baseOf(el)).href : '' } catch { /* 怪地址 */ }
         if (abs && abs.includes('#')) {
           jobs.push(spriteOf(abs).then((id) => {
             if (!id) return
@@ -1558,7 +1718,9 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       if (tag === 'TEXTAREA') c.textContent = el.value
       if (tag === 'SELECT') c.setAttribute('data-v', el.value)
 
-      // ::before / ::after
+      // ::before / ::after（绝对 / 固定定位的：跟着它的定位基准滚，也算还在往外找基准的）
+      let pa = false
+      let pf = false
       if (el.namespaceURI !== SVGNS) {
         const pes = (tag === 'INPUT' || tag === 'TEXTAREA') && el.getAttribute('placeholder') ? ['::before', '::after', '::placeholder'] : ['::before', '::after']
         for (const pe of pes) {
@@ -1568,18 +1730,82 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
           const cls = 'ddpx' + (++seq)
           c.setAttribute('class', ((c.getAttribute('class') || '') + ' ' + cls).trim())
           const urls = []
-          const body = styleText(ps, box.defaults(el, pe), urls)
+          let body = styleText(ps, box.defaults(el, pe), urls)
+          const pp = ps.position
+          if (pp === 'absolute' || pp === 'fixed') {
+            const mine = pp === 'absolute' ? holds(cs) : holds(cs, true)
+            const owe = mine ? (ownScroll(el) ? [el.scrollLeft, el.scrollTop] : [0, 0]) : pp === 'absolute' ? ctx.a : ctx.f
+            if (owe[0] || owe[1]) body += shiftCss(ps, owe[0], owe[1])
+            if (!mine) { if (pp === 'absolute') pa = true; else pf = true }
+            // 贴着窗口的（比如 body::before 铺的固定背景）：页面滚过、body 整体挪了，按 body 的位置换算回去
+            if (pp === 'fixed' && !mine && lift && el.ownerDocument === document && document.body.contains(el) && !fixedHeld(el)) {
+              const x = parseFloat(ps.left)
+              const y = parseFloat(ps.top)
+              if (Number.isFinite(x) && Number.isFinite(y)) body += `left:${x - bodyAt.l}px;top:${y - bodyAt.t}px;right:auto;bottom:auto;`
+            }
+          }
           const i = pseudoRules.length
           pseudoRules.push(`.${cls}${pe}{${body}}`)
-          if (urls.length) jobs.push(inlineUrls(pseudoRules[i], here(), inline).then((t) => { pseudoRules[i] = t }))
+          if (urls.length) jobs.push(inlineUrls(pseudoRules[i], baseOf(el), inline, idp).then((t) => { pseudoRules[i] = t }))
         }
       }
 
-      if (tag === 'IFRAME' || tag === 'CANVAS' || tag === 'VIDEO' || tag === 'TEXTAREA') return c
+      // 下面这几种不往里走：自己是绝对 / 固定定位的也得记上（外层滚动区挪的时候要知道）
+      if ((tag === 'IFRAME' || tag === 'CANVAS' || tag === 'VIDEO' || tag === 'TEXTAREA') && (cs.position === 'absolute' || cs.position === 'fixed')) {
+        openOf.set(el, { a: cs.position === 'absolute', f: cs.position === 'fixed' })
+      }
+      if (tag === 'IFRAME') {
+        // 同源的内嵌页面：把它的页面也复制进来（框住、按它自己的滚动摆）；拿不到的（跨域）铺一层浅灰，看得出这里有东西没截到
+        let doc = null
+        try { doc = el.contentDocument } catch { doc = null }
+        let inner = null
+        if (doc && doc.documentElement && depth < 3) {
+          depth++
+          try { inner = walkIn(doc) } finally { depth-- }
+        }
+        // 里面固定定位的元素以这一框为准：框自己没变换的，补一个不动的变换
+        if (inner) {
+          c.setAttribute('style', c.getAttribute('style') + 'overflow:hidden;' + (cs.transform !== 'none' ? '' : 'transform:translate(0,0);'))
+          c.appendChild(inner)
+        } else c.setAttribute('style', c.getAttribute('style') + 'background-color:rgba(127,127,127,.15);')
+        return c
+      }
+      if (tag === 'CANVAS' || tag === 'VIDEO' || tag === 'TEXTAREA') return c
+      // 自己滚过的滚动区：里面的东西按滚动距离往回挪（图里没有滚动）
+      const ox = el.namespaceURI !== SVGNS && ownScroll(el) ? el.scrollLeft : 0
+      const oy = el.namespaceURI !== SVGNS && ownScroll(el) ? el.scrollTop : 0
+      // 跟着内容滚的背景（background-attachment: local）也往回挪
+      if ((ox || oy) && /local/.test(cs.backgroundAttachment)) {
+        const att = cs.backgroundAttachment.split(',').map((x) => x.trim())
+        const pos = cs.backgroundPosition.split(',').map((p, i) => {
+          if (att[i % att.length] !== 'local') return p.trim()
+          const [x = '0%', y = '0%'] = splitTop(p.trim())
+          return `calc(${x} - ${ox}px) calc(${y} - ${oy}px)`
+        })
+        c.setAttribute('style', c.getAttribute('style') + `background-position:${pos.join(', ')};`)
+      }
+      let oa = false
+      let of = false
+      const kids = []
+      // 自己是定位基准的：它的后代按它的滚动挪；不是的，接着用外面传进来的
+      const hF = holds(cs, true)
+      const hA = hF || cs.position !== 'static' // 和 holds(cs) 一样，少算一遍
+      const sub = hA || hF ? { a: hA ? [ox, oy] : ctx.a, f: hF ? [ox, oy] : ctx.f } : ctx
       for (const child of el.childNodes) {
-        const k = walk(child)
-        if (k) c.appendChild(k)
+        const k = walk(child, sub)
+        if (k) kids.push([child, k])
+        const o = child.nodeType === 1 && openOf.get(child)
+        if (o) { oa = oa || o.a; of = of || o.f }
       }
+      if (ox || oy) scrollBack(kids, cs, ox, oy, stuck, openOf)
+      for (const [, k] of kids) c.appendChild(k)
+      if (hA) oa = false
+      if (hF) of = false
+      if (pa) oa = true
+      if (pf) of = true
+      if (cs.position === 'absolute') oa = true
+      if (cs.position === 'fixed') of = true
+      if (oa || of) openOf.set(el, { a: oa, f: of })
       if (tag === 'SELECT') {
         const o = el.selectedOptions && el.selectedOptions[0]
         c.textContent = ''
@@ -1589,6 +1815,20 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       }
       return c
     }
+    // 内嵌页面的那一份：它自己的根元素也当滚动区（滚过就往回挪），不算外层页面的根
+    let depth = 0
+    const docs = new Set([document])
+    function walkIn(doc) {
+      // 内嵌页面里贴住的元素也按它现在的样子摆
+      for (const [el, v] of stickyShift(doc)) stuck.set(el, v)
+      docs.add(doc)
+      if (!idPre.has(doc)) idPre.set(doc, `ddpf${++seq}-`)
+      const r = doc.documentElement
+      // 以整页为准的绝对定位跟着这一页滚
+      const k = walk(r, { a: [r.scrollLeft, r.scrollTop], f: [0, 0] })
+      if (k) k.setAttribute('style', (k.getAttribute('style') || '') + 'overflow:hidden;')
+      return k
+    }
 
     try {
       const top = topDark() // 和复制页面同一刻量（后面等图片、字体时页面可能又变了）
@@ -1596,19 +1836,23 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       // 字体：页面样式表里的 @font-face，只带用到的字族
       const faces = []
       const used = [...families].join(',').toLowerCase()
-      for (const sheet of document.styleSheets) {
-        let rules
-        try { rules = sheet.cssRules } catch { continue }
-        const base = sheetHref(sheet)
-        const scan = (list) => {
-          for (const r of list) {
-            if (r.cssRules && !(r instanceof CSSFontFaceRule)) { try { scan(r.cssRules) } catch { /* 读不了 */ } continue }
-            if (!(r instanceof CSSFontFaceRule)) continue
-            const fam = (r.style.getPropertyValue('font-family') || '').replace(/['"]/g, '').trim().toLowerCase()
-            if (fam && used.includes(fam)) faces.push(inlineUrls(r.cssText, base, inline))
+      // 内嵌页面的规则是它那个窗口的类，instanceof 认不出来，按 type 认（5 = @font-face）
+      const isFace = (r) => r.type === 5 || r instanceof CSSFontFaceRule
+      for (const d of docs) {
+        for (const sheet of d.styleSheets) {
+          let rules
+          try { rules = sheet.cssRules } catch { continue }
+          const base = d === document ? sheetHref(sheet) : sheet.href || d.baseURI
+          const scan = (list) => {
+            for (const r of list) {
+              if (r.cssRules && !isFace(r)) { try { scan(r.cssRules) } catch { /* 读不了 */ } continue }
+              if (!isFace(r)) continue
+              const fam = (r.style.getPropertyValue('font-family') || '').replace(/['"]/g, '').trim().toLowerCase()
+              if (fam && used.includes(fam)) faces.push(inlineUrls(r.cssText, base, inline))
+            }
           }
+          scan(rules)
         }
-        scan(rules)
       }
       await Promise.all(jobs)
       const fontCss = (await Promise.all(faces)).join('\n')
@@ -1618,7 +1862,10 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       ;(body || root).insertBefore(style, (body || root).firstChild)
       if (sprites.childNodes.length) (body || root).appendChild(sprites)
       if (!full && (scrollX || scrollY) && body) {
-        body.setAttribute('style', body.getAttribute('style') + `transform:translate(${-scrollX}px,${-scrollY}px);`)
+        // 用 translate 属性挪：它在 transform / scale / rotate 外面一层，body 自己缩放旋转过也照样整体挪滚动距离
+        const t0 = String(getComputedStyle(document.body).translate || 'none')
+        const [tx = '0px', ty = '0px', tz = ''] = t0 === 'none' ? [] : splitTop(t0)
+        body.setAttribute('style', body.getAttribute('style') + `translate:calc(${tx} - ${scrollX}px) calc(${ty} - ${scrollY}px)${tz ? ' ' + tz : ''};`)
       }
       const xml = new XMLSerializer().serializeToString(root)
       const svg = `<svg xmlns="${SVGNS}" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}"><foreignObject x="0" y="0" width="100%" height="100%">${xml}</foreignObject></svg>`
@@ -1641,13 +1888,159 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     }
   }
 
+  /** 贴住的（sticky）元素现在被贴偏了多少：量现在的位置，临时取消贴住再量一次，差就是偏移（同一刻改回去，不重画） */
+  function stickyShift(doc) {
+    const out = new Map()
+    const list = []
+    for (const el of doc.querySelectorAll('body *')) {
+      if (getComputedStyle(el).position === 'sticky') list.push(el)
+      if (list.length >= 400) break
+    }
+    if (!list.length) return out
+    const live = list.map((el) => [el.offsetLeft, el.offsetTop])
+    const st = doc.createElement('style')
+    st.textContent = '[data-dsh-unstick]{position:relative!important;inset:auto!important}'
+    doc.documentElement.appendChild(st)
+    try {
+      for (const el of list) el.setAttribute('data-dsh-unstick', '')
+      // 按排版坐标量（offsetLeft / offsetTop 不受缩放、旋转影响；相对最近的定位祖先，外层也贴住了的那份不会重复算）
+      list.forEach((el, i) => {
+        const dx = live[i][0] - el.offsetLeft
+        const dy = live[i][1] - el.offsetTop
+        if (dx || dy) out.set(el, [dx, dy])
+      })
+    } finally {
+      for (const el of list) el.removeAttribute('data-dsh-unstick')
+      st.remove()
+    }
+    return out
+  }
+
+  /** 固定元素是不是被某个祖先（transform、filter 之类）接管了位置：接管了就跟着那个祖先走，不用挪 */
+  function fixedHeld(el) {
+    for (let a = el.parentElement; a; a = a.parentElement) if (holds(getComputedStyle(a), true)) return true
+    return false
+  }
+
+  /**
+   * 滚过的滚动区：里面的东西按滚动距离往回挪（图里没有滚动）。kids：[原节点, 复制出来的] 按顺序，挪的时候可能换掉复制出来的那个。
+   * 能不动定位就不动（改成相对定位会打乱上下层、把往外找基准的绝对定位框进来）：
+   * 竖着滚的块容器 / 竖排 flex，给第一个在文档流里的块加负的上边距，后面的跟着往上走；横着滚的横排 flex 同理加左边距，块容器给每个块加左边距。
+   * 别的排法（grid 之类）退回一个个用相对定位挪；绝对 / 固定定位的（以滚动区为准的）改它自己的 left / top
+   */
+  function scrollBack(kids, pcs, ox, oy, stuck, openOf) {
+    const flex = /flex/.test(pcs.display)
+    const grid = /grid/.test(pcs.display)
+    const dir = String(pcs.flexDirection || 'row')
+    const row = flex && dir === 'row'
+    const col = flex && dir === 'column'
+    const rtl = pcs.direction === 'rtl'
+    const add = (k, css) => k.setAttribute('style', (k.getAttribute('style') || '') + css)
+    const info = kids.map(([child, k]) => {
+      if (child.nodeType !== 1) return { child, k, flow: true, text: !!(child.nodeValue || '').trim(), blank: !(child.nodeValue || '').trim() }
+      const ccs = getComputedStyle(child)
+      const out = ccs.position === 'absolute' || ccs.position === 'fixed'
+      return { child, k, ccs, flow: !out, inline: !flex && !grid && /^inline/.test(ccs.display) }
+    })
+    const flow = info.filter((x) => x.flow && !x.blank)
+    const first = flow[0]
+    // 负边距能整列带着走的：普通的块（不浮动、不是 display:contents）
+    const block = (x) => x && !x.text && !x.inline && x.ccs.float === 'none' && x.ccs.display !== 'contents'
+    const floats = flow.some((x) => x.ccs && x.ccs.float !== 'none')
+    // flex 主轴不是从头排的（居中、两端对齐……）：加了负边距会重新排，退回一个个挪
+    const startish = (v) => /^(normal|flex-start|start|left|stretch)$/.test(String(v || 'normal'))
+    let fy = oy
+    let fx = ox
+    let spacer = null
+    if (oy && block(first) && !floats && !flex && !grid) {
+      // 块容器：前面垫一个高 0、上边距为负的块（自己是 BFC，边距不和后面的叠），后面的照原来的边距（包括往里叠的）往下排
+      spacer = document.createElementNS(XHTML, 'div')
+      spacer.setAttribute('style', `display:flow-root;height:0;margin:-${oy}px 0 0;padding:0;border:0`)
+      fy = 0
+    } else if (oy && block(first) && col && startish(pcs.justifyContent)) {
+      // flex 里边距不叠：直接给第一个加
+      add(first.k, `margin-top:${(parseFloat(first.ccs.marginTop) || 0) - oy}px;`)
+      fy = 0
+    }
+    if (ox && !rtl && block(first) && row && startish(pcs.justifyContent)) {
+      add(first.k, `margin-left:${(parseFloat(first.ccs.marginLeft) || 0) - ox}px;`)
+      fx = 0
+    } else if (ox && !rtl && !flex && !grid && !floats && flow.length && flow.every(block)) {
+      // 块是一个个摆的，横着各挪各的（宽度已经按原来的定死，不会被负边距撑宽）
+      for (const x of flow) add(x.k, `margin-left:${(parseFloat(x.ccs.marginLeft) || 0) - ox}px;`)
+      fx = 0
+    }
+    // 绝对 / 固定定位的在 walk 里按定位基准挪过了；剩下没挪成的一个个挪
+    for (const x of info) {
+      if (x.blank || !x.flow) continue
+      if (fx || fy) x.k = scrolledKid(x.k, x.child, pcs, fx, fy, stuck, openOf.get(x.child))
+    }
+    info.forEach((x, i) => { kids[i][1] = x.k })
+    if (spacer) kids.splice(kids.findIndex(([c]) => c === first.child), 0, [null, spacer])
+  }
+
+  /** 按空格拆一个 CSS 值（括号里的空格不拆：calc()、clamp() 整个算一段） */
+  function splitTop(v) {
+    const out = []
+    let cur = ''
+    let depth = 0
+    for (const ch of String(v)) {
+      if (ch === '(') depth++
+      else if (ch === ')') depth = Math.max(0, depth - 1)
+      if (/\s/.test(ch) && !depth) { if (cur) out.push(cur); cur = '' } else cur += ch
+    }
+    if (cur) out.push(cur)
+    return out
+  }
+
+  /** 定位元素往回挪 (dx, dy)：只动挪了的那个方向；从右往左排的横向按 right 挪 */
+  function shiftCss(cs, dx, dy) {
+    let css = ''
+    if (dy) { const y = parseFloat(cs.top); if (Number.isFinite(y)) css += `top:${y - dy}px;bottom:auto;` }
+    if (dx) {
+      if (cs.direction === 'rtl') { const r = parseFloat(cs.right); if (Number.isFinite(r)) css += `right:${r + dx}px;left:auto;` } else { const x = parseFloat(cs.left); if (Number.isFinite(x)) css += `left:${x - dx}px;right:auto;` }
+    }
+    return css
+  }
+
+  /**
+   * 滚过的滚动区里的一个孩子，用相对定位往回挪。
+   * 不跟着滚的不挪：固定定位（滚动区没接管它）、包含块在滚动区外面的绝对定位。
+   * 本来没定位、里面又有还在往外找基准的绝对定位的（比如以外层为准的弹层）：改成相对定位会把它们框进来，这一块宁可不挪
+   */
+  function scrolledKid(k, child, pcs, ox, oy, stuck, open) {
+    if (child.nodeType === 3) {
+      if (!child.nodeValue.trim()) return k
+      const s = document.createElementNS(XHTML, 'span')
+      s.setAttribute('style', `position:relative;left:${-ox}px;top:${-oy}px;`)
+      s.appendChild(k)
+      return s
+    }
+    if (child.nodeType !== 1) return k
+    const ccs = getComputedStyle(child)
+    const pos = ccs.position
+    if ((pos === 'fixed' && !holds(pcs, true)) || (pos === 'absolute' && !holds(pcs))) return k
+    if (pos === 'static' && open && open.a) return k
+    let x = 0
+    let y = 0
+    if (stuck.has(child)) [x, y] = stuck.get(child)
+    else if (pos !== 'static' && pos !== 'sticky') { x = parseFloat(ccs.left) || 0; y = parseFloat(ccs.top) || 0 }
+    const keep = pos === 'absolute' || pos === 'fixed'
+    // 从右往左排的：右边的偏移才算数
+    const hx = ccs.direction === 'rtl' && !stuck.has(child) && pos !== 'static' && pos !== 'sticky'
+      ? `right:${(parseFloat(ccs.right) || 0) + ox}px;left:auto;`
+      : `left:${x - ox}px;right:auto;`
+    k.setAttribute('style', (k.getAttribute('style') || '') + `position:${keep ? pos : 'relative'};${ox ? hx : ''}${oy ? `top:${y - oy}px;bottom:auto;` : ''}`)
+    return k
+  }
+
   async function onCapture(d) {
     try {
       const r = await capture(d)
       // 整页图从文档顶上画起，链接加上滚动距离；只截视口时就是视口里的位置
       const links = linksOf().map((l) => (d.full ? { ...l, x: l.x + scrollX, y: l.y + scrollY } : l))
         .filter((l) => l.x < r.w && l.y < r.h && l.x + l.w > 0 && l.y + l.h > 0)
-      post({ type: 'captured', id: d.id, png: r.png, w: r.w, h: r.h, scale: r.scale, title: document.title, links, top: r.top })
+      post({ type: 'captured', id: d.id, png: r.png, w: r.w, h: r.h, scale: r.scale, title: document.title, links, top: r.top, href: here() })
     } catch (e) {
       post({ type: 'captured', id: d.id, error: String((e && e.message) || e) })
     }