Question

我正在自定义由第三方提供和托管的HTML页面，因此我对页面的操作受到严格限制。在页面上有一个如下所示的导航菜单。

<ul class='nav'>
   <li class='active'>
     <a href='/affiliate'>
       <span id='affiliate-nav-homepage'>
         <span class='default'>Home Page</span>
       </span>
     </a>
   </li>
   <li>...

问题：如何让上面的代码段显示文字“Home”而不是“Home Page”，如果我可以做的就是在{@}}中添加<style>元素第<head>页;并在页面开头附近添加一些HTML代码（可能包含Javascript）？

我考虑过这两条路径之一，但这两条路径都存在问题。

1）使用CSS隐藏文本（“主页”）。使用:before或:after伪选择器添加我自己的文字（“主页”）。

display: none可能不是隐藏文字的好方法，因为不理解:before和:after的浏览器仍会理解display: none，我最终会根本没有文字。

我有更好的CSS选择吗？将字体大小更改为0？改变文字颜色？以某种方式操纵z-index？如果某些旧浏览器显示“主页”文本，则可以。如果某些浏览器显示“主页主页”，或某些浏览器根本不显示任何文本，则不确定。

- 或 -

2）使用Javascript来操纵DOM

Javascript的难点在于我只能在我要修改的元素之前将其插入到页面主体的开头附近。我可以挂钩整个页面加载后触发的事件，但我想避免页面文本闪烁（文本“主页”短暂显示然后更改为“主页”）。是否有这样的事件，我将如何勾选它？

谢谢你的帮助。

Answer 1

在JavaScript中

window.addEventListener("load", function(){
    document.querySelector("span.default").textContent = "Home";
    //using document.querySelector to select the span with classname default
    //using textContent to change the content of the node.
}, false);

在脚本块中可以执行此操作。

这将在页面加载时执行。这将执行得如此之快，几乎在所有情况下你都不会看到文字跳跃。

示例：

window.addEventListener("load", function(){
    document.querySelector("span.default").textContent = "Home";
}, false);

<ul class='nav'>
   <li class='active'>
     <a href='/affiliate'>
       <span id='affiliate-nav-homepage'>
         <span class='default'>Home Page</span>
       </span>
     </a>
   </li>
</ul>

当您的页面加载因其他资源而变慢时，@ Matusz Mania使用CSS隐藏元素并再次启动它的想法实际上非常好。我建议使用opacity: 0或visibility: hidden代替display:none，因为后者会从页面中删除该元素，当它再次变为可见时，它会使内容在其下方跳转。

探索CSS选项

#affiliate-nav-homepage:before{
    content: "Home";
}

.default {
  display: none;
}

<ul class='nav'>
  <li class='active'>
    <a href='/affiliate'>
      <span id='affiliate-nav-homepage'>
             <span class='default'>Home Page</span>
      </span>
    </a>
  </li>
</ul>

Answer 2

防闪烁修复：

.default { display: none; }

在文档准备就绪时更改文本并显示：

body.onload = function (){

    //getElementsByClassName not working in old browsers, so ...
    var el = document.getElementById('affiliate-nav-homepage').getElementsByTagName('span')[0];

    el.innerHTML = 'Home';
    el.style.display = 'block';
};

其他您可以隐藏所有内容，并在通过此方法更改所有javascript后显示它。

这不是一个优雅的解决方案，但正如您所说，您解决问题的选择有限。

使用HTML或Javascript替换网页上的文本

2 个答案:

在JavaScript中

探索CSS选项