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

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>...

问题：如果只允许在页面<head>添加<style>元素，那么如何使上面的片段显示文本“ Home”而不是“ Home Page” ； 并在页面开头附近添加一些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>

当您的页面加载因其他资源而变慢时，@ Mateusz 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 个解决方案

解决方案1
1 2015-03-05 17:16:24

在JavaScript中

探索CSS选项

解决方案2
1 已采纳 2015-03-05 17:21:07

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

问题描述

2 个解决方案

解决方案1 1 2015-03-05 17:16:24

在JavaScript中

探索CSS选项

解决方案2 1 已采纳 2015-03-05 17:21:07

解决方案1
1 2015-03-05 17:16:24

解决方案2
1 已采纳 2015-03-05 17:21:07