Question

我的网站使用iframe中显示的第三方内容。第三方允许在其站点的头部上传CSS或JS文件，因此我可以更改iframe内容的外观。无法更改文件加载位置的位置（例如在主体之后移动所有JS文件）。

问题在于：我正在尝试更改div的文本而无法通过我的JS文件执行此操作。

<div id="exampleText">
    There's nothing here!
    <span>Try again at 4:00</span>
</div>

我知道我可以使用.html或.innerHTML甚至nodeType === 3并设置nodeValue来替换内容。这是放置在页面浏览器控制台内部时的工作方式之一：

jQuery(document).ready(function ($) {
    document.getElementById('exampleText').innerHTML =
    "Sorry, you're too early!<span>Check back one hour before class starts</span>";
});

然而，当我把它放在我的JS文件中并刷新页面时，我收到一个错误，指出：

Uncaught TypeError: Cannot set property 'innerHTML' of null(…)

为什么通过浏览器控制台放入页面内部时有效，而不是从文件中放入？这是由于JS运行后的网站加载？如何解决此问题以用我自己的内容替换文本？

Answer 1

我找不到通过JS轻松完成此操作的方法，但我能够用CSS替换内容。以下是我管理它的方式：

#exampleText {
    text-indent: -9999px;
    line-height: 0;
}

#exampleText span,
#exampleText span:before {
    text-indent: 0;
    line-height: initial;
}

#exampleText span:before {
    content: "Sorry, you're too early!";
    display: block;
    font-weight: 700;
}

此方法允许我保持跨度文本相同，同时仅更新没有周围元素的内容。

用单独的JS文件替换第三方iframe中的文本

1 个答案: