javascript - 使用 JavaScript 定位 HTML 小部件中的动态元素

Question

我正在尝试使用 Javascript 从页面上的 HTML 小部件检索元素。我不能只使用通常的 document.getelementsbyclassname 等，因为小部件被视为页面的嵌入部分。

我已经尝试过这个:

var iframe = document.getElementsByClassName("widgetclassname")[0];
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

我过去曾将其用于 iframe，但没有用于此。我收到此错误:

未捕获类型错误:无法读取未定义的属性“contentDocument”

我尝试添加延迟并移动项目，以防它是一个计时问题(尝试在正确加载之前获取内容)，但这没有什么区别。

我不能使用 ID 来代替类名，因为小部件没有 ID，而且我无法更改它。

Answer 1

Cannot read property 'contentDocument' of undefined表示“嘿!iframe未定义!”这意味着您的getElementsByClassName()返回一个空节点列表。

如果不查看您尝试查询的文档，我们将无法为您提供进一步帮助。您是否使用开发人员工具来确保 <iframe>你想要那门课吗？完全正确，没有拼写错误，没有大小写变化？

或者，您可以尝试使用:

// first iframe in the document
var iframe = document.querySelector('iframe');

// third iframe in the document
var iframe = document.querySelectorAll('iframe')[2];

<小时/>

编辑:根据我们的聊天讨论，问题在于该页面正在动态加载内容，并且您尝试运行的脚本是在该内容加载之前发生的。

一个简单的技巧是等待您想要加载的元素，然后运行您想要的代码。例如:

document.title = "Search Results - AvenaGo"; 
var waitForHotel = setInterval(function(){ 
  var hotelName = document.querySelector('.hotel_page-hotel_name'); 
  if (hotelName) { 
    clearInterval(waitForHotel); 
    document.title = hotelName.textContent + ' - AvenaGo'; 
  } 
}, 100);

每隔 100 毫秒，此代码将运行一次并检查是否有类为 hotel_page-hotel_name 的元素。已加载。如果有，它将停止检查，并根据该元素中的文本修改页面的标题。