考慮有一些超鏈接標簽使 API 調用后端。例子：<a href="/get/contact-info/" id="ember107" >Contact info </a>后端 API 調用完成后，它將觸發/打開該頁面中的彈出窗口。彈出數據：（示例一div數據）<div id="ember"> <h1 id="pv-contact-info"> Contact Name</h1></div>我的目標是從這個彈出窗口（標簽上方）中提取數據。讓我們說 h1 標簽中的聯系人姓名。到目前為止我嘗試過的：let atag = document.getElementById("ember107");atag.addEventListener('click', () => { document.getElementById("pv-contact-info").innerText; // getting from popup h1 tag});atag.click(); // explicit click我遇到的問題是Uncaught TypeError: Cannot read property 'click' of null執行這條語句時document.getElementById("pv-contact-info").innerText;我知道問題是彈出內容未完全加載，這就是此代碼 document.getElementById("pv-contact-info")返回 null 的原因。我的問題是是否有監聽器函數來檢查 Popup 內容是否加載 完全或者我們可以用另一種方法來做到這一點。最好使用瀏覽器支持 /vanilla javascript 而不是庫。
2 回答
婷婷同學_
TA貢獻1844條經驗 獲得超8個贊
您可以使用 MutationObserver 來監視頁面上 DOM 的更改。
如果您需要與舊版瀏覽器保持兼容，請使用單擊事件來觸發您自己的手動觀察器。就像是：
var interval_id = false;
function lookForPopup(){
? ? if(interval_id){
? ? ? ? clearInterval(interval_id);
? ? }else{
? ? ? ? interval_id = setInterval(function(){
? ? ? ? ? ? var popup = document.getElementById('some-id');
? ? ? ? ? ? if(popup){
? ? ? ? ? ? ? ? // do something
? ? ? ? ? ? ? ? clearInterval(interval_id);
? ? ? ? ? ? }
? ? ? ? },1000);
? ? }
}
繁花不似錦
TA貢獻1851條經驗 獲得超4個贊
我如何使用MutationObserver解決此問題。
MutationObserver has an ability to watch for changes being made to the DOM tree.
I mention the code below how it fixed my issue/requirement.
// selecting the href by id and triggering a click event.
let hrefDoc = document.getElementById("ember");
divDoc.click();
let m = new MutationObserver(() => {
let divDoc = document.getElementById("ember");
new MutationObserver( () => {
// Finally Extracting the required data
console.log(document.getElementById("pv-contact-info").innerText);
}
}).observe(divDoc || document,observerOptions);
});
m.observe(hrefDoc,observerOptions);
正如您在上面看到的，我添加了另一個子 MutationObserver 來觀察 divDoc 元素。這是因為當 hrefDoc 點擊事件時，父級 MutationObserver 回調會通過一些觀察者選項被調用。但在這種情況下，我無法獲取我的 <div id="ember"> 突變節點。
這就是我添加另一個此語句let divDoc = document.getElementById("ember");并在子級中等待此 targetNode MutationObserver的原因。最后我從這個標簽中提取了數據<h1 id="pv-contact-info">
- 2 回答
- 0 關注
- 191 瀏覽
添加回答
舉報
0/150
提交
取消