使用HTML或Javascript替換網頁上的文本
[英]Replacing text on web page using HTML or Javascript
問題描述
我正在自定義由第三方提供和托管的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的困難在於，我只能將其插入到要修改的元素之前的頁面正文開頭附近。 我可以掛鈎一個在加載整個頁面后觸發的事件，但我想避免頁面文本閃爍（短暫顯示文本“主頁”，然后更改為“主頁”）。 是否有這樣的事件，我該如何掛鈎？
謝謝你的幫助。
2 個解決方案
解決方案1
1 2015-03-05 17:16:24
在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>
解決方案2
1 已采納 2015-03-05 17:21:07
防閃爍修復：
.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更改后顯示它。
這不是一個很好的解決方案，但是正如您所說的，解決問題的選擇有限。
如何使用 JavaScript DOM 向網頁上的 HTML 元素添加文本
[英]How to add text to HTML element on web page using JavaScript DOM
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.