iframe.contentWindow.document.addEventListener('scroll', function(event) { event.stopPropagation(); // 阻止事件冒泡 iframe.contentWindow.scrollBy(0, event.deltaY); // 只对iframe页面进行滚动 });上面那段代码中没有执行是为什么

这段代码是为了在嵌入的 iframe 页面中捕获滚动事件，并且让 iframe 页面进行滚动。但是，这段代码本身只是定义了一个事件监听器，它并没有被执行。如果想要使这段代码生效，需要将它放到一个函数中，并且在合适的时候调用这个函数，比如在页面加载完成后或者在用户进行某个操作后。另外，需要注意的是，如果 iframe 中的页面与主页面不是同源的，那么可能会受到浏览器的跨域限制，无法进行跨域操作。

相关问题

const print = () => { if (!baseInfo.orderCode) { message.error("打印正在准备，请5秒后再点击") return } const el = document.getElementById("print-container") const iframe = document.createElement("IFRAME") let doc = null // iframe.setAttribute('style', 'position:absolute;top:0px;left:0px;width:100%;height:100%',); document.body.appendChild(iframe) doc = iframe.contentWindow.document // 引入打印的专有CSS样式，根据实际修改 doc.write(`<LINK rel="stylesheet" type="text/css" href="./orderPrint.css">`) doc.write(el.innerHTML) doc.close() // 获取iframe的焦点，从iframe开始打印 iframe.contentWindow.focus() iframe.onload = () => { iframe.contentWindow.print() document.body.removeChild(iframe) } if (navigator.userAgent.indexOf("MSIE") > 0) { document.body.removeChild(iframe) } const old = window.document.body.innerHTML const printPart = document.getElementById("print-container") window.document.body.innerHTML = "" window.document.body.appendChild(printPart) window.print() window.document.body.innerHTML = old window.location.reload() }优化这段代码

这段代码可以进行如下的优化：

1. 避免在函数内部操作 DOM，最好将其作为参数传递进来，这样可以提高代码的可重用性和可维护性。

const print = (elId, cssUrl) => {
  const el = document.getElementById(elId)
  if (!el) {
    message.error("找不到打印内容，请检查elId")
    return
  }
  if (!baseInfo.orderCode) {
    message.error("打印正在准备，请5秒后再点击")
    return
  }
  const iframe = document.createElement("IFRAME")
  document.body.appendChild(iframe)
  const doc = iframe.contentWindow.document
  doc.write(`<LINK rel="stylesheet" type="text/css" href="${cssUrl}">`)
  doc.write(el.innerHTML)
  doc.close()
  iframe.contentWindow.focus()
  iframe.onload = () => {
    iframe.contentWindow.print()
    document.body.removeChild(iframe)
  }
  if (navigator.userAgent.indexOf("MSIE") > 0) {
    document.body.removeChild(iframe)
  }
}

2. 将打印的专有CSS样式和打印的内容分开处理，以便更好地维护和修改样式。

const print = (elId, cssUrl, printContent) => {
  const el = document.getElementById(elId)
  if (!el) {
    message.error("找不到打印内容，请检查elId")
    return
  }
  if (!baseInfo.orderCode) {
    message.error("打印正在准备，请5秒后再点击")
    return
  }
  const iframe = document.createElement("IFRAME")
  document.body.appendChild(iframe)
  const doc = iframe.contentWindow.document
  const link = document.createElement("link")
  link.rel = "stylesheet"
  link.type = "text/css"
  link.href = cssUrl
  doc.head.appendChild(link)
  doc.body.innerHTML = printContent || el.innerHTML
  iframe.contentWindow.focus()
  iframe.onload = () => {
    iframe.contentWindow.print()
    document.body.removeChild(iframe)
  }
  if (navigator.userAgent.indexOf("MSIE") > 0) {
    document.body.removeChild(iframe)
  }
}

3. 将打印内容从 DOM 中分离出来，以便在不同的场合下方便地调用。

const printContent = (elId) => {
  const el = document.getElementById(elId)
  if (!el) {
    message.error("找不到打印内容，请检查elId")
    return ""
  }
  return el.innerHTML
}

const print = (elId, cssUrl, printContent) => {
  if (!baseInfo.orderCode) {
    message.error("打印正在准备，请5秒后再点击")
    return
  }
  const iframe = document.createElement("IFRAME")
  document.body.appendChild(iframe)
  const doc = iframe.contentWindow.document
  const link = document.createElement("link")
  link.rel = "stylesheet"
  link.type = "text/css"
  link.href = cssUrl
  doc.head.appendChild(link)
  doc.body.innerHTML = printContent || printContent(elId)
  iframe.contentWindow.focus()
  iframe.onload = () => {
    iframe.contentWindow.print()
    document.body.removeChild(iframe)
  }
  if (navigator.userAgent.indexOf("MSIE") > 0) {
    document.body.removeChild(iframe)
  }
}

iframe.contentWindow, 获取iframe的window对象iframe.contentDocument, 获取iframe的document对象

在JavaScript中，`iframe.contentWindow` 和 `iframe.contentDocument` 是用来与嵌套在父页面内的IFrame（内联框架）进行交互的重要属性。这些属性允许你访问到IFrame内的窗口和文档对象，以便于操作其内容。

1. `iframe.contentWindow`[^4]: 这个属性返回的是嵌入在IFrame中的页面的全局窗口对象。你可以通过这个窗口对象来访问IFrame中的所有全局变量、函数和DOM元素，就像它们是在IFrame的主窗口中一样。例如：

var iframe = document.getElementById('myIframe');
var iframeWindow = iframe.contentWindow;
console.log(iframeWindow.document.body); // 输出IFrame的body元素

2. `iframe.contentDocument`[^4]: 这个属性返回的是IFrame中的完整HTML文档对象。这意味着你可以通过它来访问和操作IFrame内的HTML结构，如创建节点、修改样式等：

var iframeDoc = iframe.contentDocument;
var iframeElement = iframeDoc.getElementById('someElement'); // 获取IFrame内的特定元素
iframeElement.style.color = 'red'; // 修改IFrame内元素的颜色

请注意，这两个属性仅适用于同源策略允许的情况，即如果嵌入的IFrame是从同一个域加载的。对于跨域的IFrame，由于安全限制，你可能无法直接访问其window或document对象。