使用React

Question

我有一个wordpress网站，它通过一个脚本从第三方应用程序中提取脚本，该脚本将iframe加载到页面上。然后，iframe有一个带按钮的表单。

点击其中一个按钮后，它会从页面中删除这些按钮。写入一组新元素。表单搞砸了CSS，所以我希望为它添加一个类，使其大小合适，但我无法获得以下代码以便可靠地工作。在控制台中运行它将起作用，但在页面加载时不设置它。 如何使用选择器

向元素添加类

  

＆＃39; div.main-content.booking-user.col-md-8＆gt;形式＆＃39;

这是我尝试的代码（请注意，jQuery的纯Javascript不在页面上）

document.querySelector('iframe').addEventListener('click', function(){
console.log('click captured');
var script = document.createElement("script");
script.innerHTML = "console.log('added CSS for form'); document.querySelector('div.main-content.booking-user.col-md-8 > form').className='col-md-8';";
document.head.appendChild(script);
});

Answer 1

如果这在某些时候有效，而在其他时间没有，我怀疑是div.main-content.booking-user.col-md-8 > form元素在页面加载时不存在。如果是这种情况（但是之后很短的时间内存在，您可以将脚本代码包裹在setTimeout或setInterval调用中以延迟一段时间。

类似的东西：

let intervalID;
intervalId = setInterval(() => {
  const element = document.querySelector('div.main-content.booking-user.col-md-8 > form');
  if (element) {
    element.className = 'col-md-8';
    clearInterval(intervalID);
    intervalID = null;
  }
}, 1000);

另一种可能性是，其他一些代码正在重置或以后更改iframe。

最后，因为div在iframe中，原点是一样的吗？否则，由于跨站点脚本问题，您无法访问内部。但是，既然你已经说过这种情况，我假设在某些情况下并非如此。