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

I am customizing an HTML page provided and hosted by a third-party, so I am severely restricted in what I can do to the page. On the page there is a navigation menu that looks like this.

我正在自定义由第三方提供和托管的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>...

Question: How can I make the above snippet display the text "Home" instead of "Home Page", if all I am allowed to do is add a <style> element in the page <head>; and add some HTML code (which may include Javascript) near the start of the page?

问题:如果我允许做的只是在页面中添加

I have a considered going down one of these two paths, but both paths are problematic.

我考虑过这两条路径中的一条,但这两条路径都存在问题。

1) Use CSS to hide their text ("Home Page"). Add my own text ("Home") using :before or :after pseudo-selectors.

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

display: none is probably not a good way to hide the text, because browsers that don't understand :before and :after will still understand display: none and I will end up with no text at all.

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

Are there better CSS alternatives for me? Change font size to 0? change text color? Manipulate z-index somehow? It is OK if some older browsers display the text "Home Page". It is not OK if some browsers display "Home Page Home", or if some browser do not display any text at all.

我有更好的CSS替代品吗?将字体大小更改为0?改变文字颜色?以某种方式操纵z-index?如果某些旧浏览器显示“主页”文本,则可以。如果某些浏览器显示“Home Page Home”,或某些浏览器根本不显示任何文本,则表示不行。

-- OR --

- 要么 -

2) Use Javascript to manipulate the DOM

2)使用Javascript来操纵DOM

The difficulty with Javascript is that I can only insert it near the start of the page body before the elements that I want to modify. I could hook an event that fires after the entire page is loaded, but I want to avoid the page text flashing (the text "Home Page" being displayed briefly and then changing to "Home"). Is there such an event and how would I hook it?

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

Thank you for you help.

谢谢你的帮助。

2 个解决方案

#1

Anti flashing fix:

防闪光修复:

.default { display: none; }

Changing text and showing, when document is ready:

文档准备好后更改文本并显示:

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

Additional You can hide all content and show it after all javascript changes by this method.

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

This is not elegant solution, but as You say, You have limited options to resolve Your problem.

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

2 个解决方案

#1

更多相关文章

随机推荐