В чем разница между document.body.scrollHeight & document.documentElement.scrollHeight
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
guard !webView.isLoading else {
return
}
webView.evaluateJavaScript("document.body.scrollHeight") { (heightString, error) in
guard let fittingHeight = heightString as? Int else {
return
}
let heightFloat = CGFloat(fittingHeight)
self.completionHandler?(heightFloat)
}
}
оценивать JavaScript ("document.body.scrollHeight") и оценивать JavaScript ("document.documentElement.scrollHeight") дает различные результаты высоты.
document.body.scrollHeight дает высоту как - 54,0
document.documentElement.scrollHeight дает высоту как - 86,0
В настоящее время я использую UIWebView, но наблюдал то же самое на WKWebView
Ниже приведено html, которое я использовал.
"<!DOCTYPE html><html><head><meta charset=\"UTF-8\" name=\'viewport\' content=\'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no\'><style>p {\n font-family: \'Lato\';\n font-size: 16px;\n line-height:22px;\n color: #101010;\n}\nimg {\n max-width: 280px;\n margin-left: auto;\n margin-right: auto;\n}\n.description {\n font-family: \'Lato-Regular\';\n color: #000000;\n background-color: #ffffff;\n font-size: 16px;\n line-height:22px;\n}\n.suggestedAnswer {\n font-family: \'Lato-Regular\';\n color: #5A5A5A;\n background-color: transparent;\n font-size: 14px;\n line-height: 20px;\n}\n.feedback {\n font-family: \'Lato-Regular\';\n color: #808080;\n background-color: transparent;\n font-size: 14px;\n line-height: 20px;\n}\n.choice {\n font-family: \'Lato-Regular\';\n color: #000000;\n background-color: transparent;\n font-size: 14px;\n line-height: 20px;\n}\n.choiceSubmitted {\n font-family: \'Lato-Regular\';\n color: #000000;\n background-color: transparent;\n font-size: 14px;\n line-height: 20px;\n}\n.choiceSubmittedCorrect {\n font-family: \'Lato-Regular\';\n color: #000000;\n background-color: transparent;\n font-size: 14px;\n line-height: 20px;\n}\n.choiceSubmittedIncorrect {\n font-family: \'Lato-Regular\';\n color: #808080;\n background-color: transparent;\n font-size: 14px;\n}\n.pollSubmittedCorrect {\n font-family: \'Lato-Bold\';\n color: #000000;\n background-color: transparent;\n font-size: 14px;\n line-height: 20px;\n}\n.pollSubmittedIncorrect {\n font-family: \'Lato-Regular\';\n color: #808080;\n background-color: transparent;\n font-size: 14px;\n line-height: 20px;\n}\n\n\ntable {\n margin-top: 5px !important;\n margin-bottom: 0;\n border-collapse: collapse;\n margin-left: -5px !important;\n width: 100% !important;\n}\n\ntable td, table th {\n /* top: -2px !important;*/\n text-align: center;\n vertical-align: center;\n /* position: relative !important;*/\n}\n\npre {\n display: block;\n padding: 9.5px;\n margin: 0 0 10px;\n font-size: 13px;\n line-height: 1.42857143;\n color: #333;\n background-color: #f5f5f5;\n border: 1px solid #ccc;\n border-radius: 4px;\n overflow: auto;\n word-break: normal !important;\n word-wrap: normal !important;\n white-space: pre !important;\n}\n.mjx-chtml {\n display: inline-block;\n line-height: 0;\n text-indent: 0;\n text-align: left;\n text-transform: none;\n font-style: normal;\n font-weight: normal;\n font-size: 100%;\n font-size-adjust: none;\n letter-spacing: normal;\n word-wrap: normal;\n word-spacing: normal;\n white-space: nowrap;\n float: none;\n direction: ltr;\n max-width: none;\n max-height: none;\n min-width: 0;\n min-height: 0;\n border: 0;\n margin: 0;\n padding: 1px 0\n}\n.MJXc-display {\n display: block;\n text-align: center;\n margin: 1em 0;\n padding: 0\n}\n.mjx-chtml[tabindex]:focus, body :focus .mjx-chtml[tabindex] {\n display: inline-table\n}\n.mjx-full-width {text-align: center;\n display: table-cell!important;\n width: 10000em}\n.mjx-math {\n display: inline-block;\n border-collapse: separate;\n border-spacing: 0\n}\n.mjx-math * {\n display: inline-block;\n -webkit-box-sizing: content-box!important;\n -moz-box-sizing: content-box!important;\n box-sizing: content-box!important;\n text-align: left\n}\n.mjx-numerator {\n display: block;\n text-align: center\n}\n.mjx-denominator {\n display: block;\n text-align: center\n}\n.MJXc-stacked {\n height: 0;\n position: relative\n}\n.MJXc-stacked > * {\n position: absolute\n}\n.MJXc-bevelled > * {\n display: inline-block\n}\n.mjx-stack {\n display: inline-block\n}\n.mjx-op {\n display: block\n}\n.mjx-under {\n display: table-cell\n}\n.mjx-over {\n display: block\n}\n.mjx-over > * {\n padding-left: 0px!important;\n padding-right: 0px!important\n}\n.mjx-under > * {\n padding-left: 0px!important;\n padding-right: 0px!important\n}\n.mjx-stack > .mjx-sup {\n display: block\n}\n.mjx-stack > .mjx-sub {\n display: block\n}\n.mjx-prestack > .mjx-presup {\n display: block\n}\n.mjx-prestack > .mjx-presub {\n display: block\n}\n.mjx-delim-h > .mjx-char {\n display: inline-block\n}\n.mjx-surd {\n vertical-align: top\n}\n.mjx-mphantom * {\n visibility: hidden\n}\n.mjx-merror {\n background-color: #FFFF88;\n color: #CC0000;\n border: 1px solid #CC0000;\n padding: 2px 3px;\n font-style: normal;\n font-size: 90%\n}\n.mjx-annotation-xml {\n line-height: normal\n}\n.mjx-menclose > svg {\n fill: none;\n stroke: currentColor\n}\n.mjx-mtr {\n display: table-row\n}\n.mjx-mlabeledtr {\n display: table-row\n}\n.mjx-mtd {\n display: table-cell;\n text-align: center\n}\n.mjx-label {\n display: table-row\n}\n.mjx-box {\n display: inline-block\n}\n.mjx-block {\n display: block\n}\n.mjx-span {\n display: inline\n}\n.mjx-char {\n display: block;\n white-space: pre\n}\n.mjx-itable {\n display: inline-table;\n width: auto\n}\n.mjx-row {\n display: table-row\n}\n.mjx-cell {\n display: table-cell\n}\n.mjx-table {\n display: table;\n width: 100%\n}\n.mjx-line {\n display: block;\n height: 0\n}\n.mjx-strut {\n width: 0;\n padding-top: 1em\n}\n.mjx-vsize {\n width: 0\n}\n.MJXc-space1 {\n margin-left: .167em\n}\n.MJXc-space2 {\n margin-left: .222em\n}\n.MJXc-space3 {\n margin-left: .278em\n}\n.mjx-ex-box-test {\n position: absolute;\n overflow: hidden;\n width: 1px;\n height: 60ex\n}\n.mjx-line-box-test {\n display: table!important\n}\n.mjx-line-box-test span {\n display: table-cell!important;\n width: 10000em!important;\n min-width: 0;\n max-width: none;\n padding: 0;\n border: 0;\n margin: 0\n}\n.MJXc-TeX-unknown-R {\n font-family: \"Lato-Regular\";\n font-weight: normal\n}\n.MJXc-TeX-unknown-I {\n font-family: \"Lato-Italic\";\n font-weight: normal\n}\n.MJXc-TeX-unknown-B {\n font-family: \"Lato-Regular\";\n font-weight: bold\n}\n.MJXc-TeX-unknown-BI {\n font-family: \"Lato-Italic\";\n font-weight: bold\n}\n.MJXc-TeX-ams-R {\n font-family: \"MathJax_AMS-Regular\"\n}\n.MJXc-TeX-cal-B {\n font-family: \"MathJax_Caligraphic-Bold\"\n}\n.MJXc-TeX-frak-R {\n font-family: \"MathJax_Fraktur-Regular\"\n}\n.MJXc-TeX-frak-B {\n font-family: \"MathJax_Fraktur-Bold\"\n}\n.MJXc-TeX-math-R {\n font-family: \"MathJax_Math-Regular\"\n}\n.MJXc-TeX-math-BI {\n font-family: \"MathJax_Math-BoldItalic\"\n}\n.MJXc-TeX-sans-R {\n font-family: \"MathJax_SansSerif-Regular\"\n}\n.MJXc-TeX-sans-B {\n font-family: \"MathJax_SansSerif-Bold\"\n}\n.MJXc-TeX-sans-I {\n font-family: \"MathJax_SansSerif-Italic\"\n}\n.MJXc-TeX-script-R {\n font-family: \"MathJax_Script-Regular\"\n}\n.MJXc-TeX-type-R {\n font-family: \"MathJax_Typewriter-Regular\"\n}\n.MJXc-TeX-cal-R {\n font-family: \"MathJax_Caligraphic-Regular\"\n}\n.MJXc-TeX-main-B {\n font-family: \"MathJax_Main-Bold\"\n}\n.MJXc-TeX-main-I {\n font-family: \"MathJax_Main-Italic\"\n}\n.MJXc-TeX-main-R {\n font-family: \"MathJax_Main-Regular\"\n}\n.MJXc-TeX-math-I {\n font-family: \"MathJax_Math-Italic\"\n}\n.MJXc-TeX-size1-R {\n font-family: \"MathJax_Size1-Regular\"\n}\n.MJXc-TeX-size2-R {\n font-family: \"MathJax_Size2-Regular\"\n}\n.MJXc-TeX-size3-R {\n font-family: \"MathJax_Size3-Regular\"\n}\n.MJXc-TeX-size4-R {\n font-family: \"MathJax_Size4-Regular\"\n}\n.MJXc-TeX-vec-R {\n font-family: \"MathJax_Vector-Regular\"\n}\n.MJXc-TeX-vec-B {\n font-family: \"MathJax_Vector-Bold\"\n}</style><script type=\"text/javascript\">\nwindow.onload = function() {\n var collapsableChilds = document.body.getElementsByClassName(\"collapsible-item-heading\");\n var i;\n\n for (i = 0; i < collapsableChilds.length; i++) {\n collapsableChilds[i].addEventListener(\"click\", clickFunction);\n }\n};\n\nfunction clickFunction() {\n var content = this.nextElementSibling;\n var faqOpen = !content.classList.contains(\"hide\");\n if (content.classList.contains(\"hide\")) {\n content.classList.remove(\"hide\");\n this.getElementsByClassName(\'collapsible-item-title-link-icon\')[0].classList.add(\"rotate\");\n } else {\n content.classList.add(\"hide\");\n this.getElementsByClassName(\'collapsible-item-title-link-icon\')[0].classList.remove(\"rotate\");\n }\n window.location = \"faq://tracking/\" + encodeURIComponent(this.textContent) + \"?faqOpen=\" + faqOpen + \"&id=\" + this.parentElement.getAttribute(\"id\") + \"&index=\" + Object.values(this.parentElement.parentElement.childNodes).indexOf(this.parentElement) + \"&groupId=\" + this.parentElement.parentElement.getAttribute(\"id\");\n}\n</script>\n</head><body><div class=\'choice\'><p>A bar chart with x = Opposition and y = Average runs scored</p></div></body></html>"