軟件開發過程中,可以使用以下代碼來獲取到 body 標簽中的內容:
document.body.innerHTML
但上述方式無法獲取到諸如 head、html 等 body 標簽之外的元素內容。如果需要獲取整個網頁上完整的 html 內容,可以使用以下 JavaScript 代碼:
document.documentElement.outerHTML
在 CefSharp 中,可以通過 ChromiumWebBrowser 類型的 GetSourceAsync 方法獲取網頁的源代碼。該方法返回的字符串包含 html 標簽,但不包含通過 JavaScript 動態渲染出的內容。
如果想獲取包含動態渲染的內容(比如采集場景下),可以通過運行 JavaScript 代碼的方式實現:
HTML 中,通過 JavaScript 來獲取當前元素的高度通常使用以下屬性:
var element = document.getElementById("yourElementId"); // 獲取元素var height = element.offsetHeight; // 獲取元素高度(包括padding、border,但不包括margin)
如果你想獲取元素的 CSS 定義的高度(不包括 padding 和 border),可以使用 style.height
,但這只能獲取到直接寫在元素行內樣式中的高度,而不是計算后的實際高度或 CSS 樣式表中定義的高度:
var heightInStyle = element.style.height; // 只獲取行內樣式設置的高度
在 React 中獲取當前元素的高度方式與 JavaScript 相似,但是你需要確保在 DOM 更新后獲取元素高度。可以使用 ref
來訪問實際 DOM 節點并獲取其高度:
import React, { useRef, useEffect } from 'react';function YourComponent() { const elementRef = useRef(null); useEffect(() => { if (elementRef.current) { // 在這里,elementRef.current.clientHeight 獲取元素的內容區域高度(不包括padding和border) // elementRef.current.offsetHeight 獲取元素的實際渲染高度(包括padding和border,但不包括margin) console.log('Element height:', elementRef.current.offsetHeight); } }, []); // 確保此useEffect只在組件掛載后執行一次 return ( <div ref={elementRef}> {/* 你的組件內容 */} </div> ); }export default YourComponent;
在上述代碼中,useRef
創建了一個可變的引用對象,它可以用來保存任何可變值,包括 DOM 節點。然后通過將這個 ref 對象賦給元素的 ref
屬性,React 會將對應的 DOM 節點保存到這個 ref 對象的 .current
屬性上,這樣我們就可以在回調函數或者其他適當的地方訪問到該 DOM 節點,并獲取其高度了。
如果要在圖片加載完成后獲取包含圖片的元素高度,可以監聽圖片的 load
事件。在 React 中,你可以在組件內創建一個圖片引用,并在 useEffect
中監聽圖片加載完成:
import React, { useRef, useEffect } from 'react';function YourComponent() { const elementRef = useRef(null); const imgRef = useRef(null); useEffect(() => { const handleImageLoad = () => { if (elementRef.current) { console.log('Element height after image load:', elementRef.current.offsetHeight); } }; // 如果img已經存在于DOM中,則立即觸發handleImageLoad // 否則,在img加載完成后觸發handleImageLoad if (imgRef.current && imgRef.current.complete) { handleImageLoad(); } else { imgRef.current.onload = handleImageLoad; } // 可以選擇在組件卸載時清除事件監聽,避免內存泄漏 return () => { imgRef.current.onload = null; }; }, []); // 確保此useEffect只在組件掛載后執行一次 return ( <div ref={elementRef}> <img src="your-image-source.jpg" ref={imgRef} alt="Your Image" /> {/* 其他內容 */} </div> ); }export default YourComponent;
這樣,當圖片加載完成后,就會觸發 handleImageLoad
函數,從而獲取到包含圖片的元素的實際高度。
如果圖片是服務端渲染的,并且你無法直接在 img
標簽上添加 ref
,你可以考慮監聽整個組件的 onLoad
事件來判斷圖片是否加載完成。由于 React 在瀏覽器中重新渲染時會保留 DOM 節點(除非有更改),所以可以通過檢查元素的 offsetHeight
是否有變化來判斷圖片是否加載完畢。
要代碼:
Dim doc, objhtml As Object
Dim i As Integer
Dim strhtml As String
If Not Me.WebBrowser1.Busy Then
Set doc = WebBrowser1.Document
i = 0
Set objhtml = doc.body.createtextrange()
If Not IsNull(objhtml) Then
Text1 = objhtml.htmltext
End If
End If
?
示例下載:( 在“了解更多”里下載)
圖 示:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。