使用 React 在 iframe 上编辑 Css答案

【问题标题】：Editing Css on an iframe with React使用 React 在 iframe 上编辑 Css
【发布时间】：2018-03-22 05:22:02
【问题描述】：

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

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

'div.main-content.booking-user.col-md-8 > 表格'

这是我正在尝试的代码（注意，页面上没有纯 Javascript，因为 jQuery 没有）

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);
});

【问题讨论】：

只是一个问题：在运行上述脚本之前，您是否等待 iframe 的内容加载完毕，即等待 iframe 的 onLoad？

标签： javascript css reactjs iframe

【解决方案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 中，所以原点是否相同？否则，由于跨站点脚本问题，您无法访问内部结构。然而，既然你说过这在某些时候有效，我假设这里不是这种情况。

【讨论】：