Question

此元素最后加载并在页面上延迟... 我已经为我的静态html页面创建了一个带有外部javascript文件的动态标头。我需要帮助减少代码。另外，要调用该函数，我调用body onLoad方法。有关如何在页面的所有内容加载之前调用此EXTERNAL函数的任何建议？

function addHeaders(){
var emptyHTML = document.getElementById("category_header").innerHTML;
var addHTML = 
 "<span>" + emptyHTML + "<a href='/broadcast_webcast/' class='catnav'>" + "Live     Broadcasts &amp; Webcasts" + "</a>" + "</span>"
  + "<span>" + "<a href='/business/' class='catnav'>" + "Business" + "</a>" + "</span>" 
  + "<span>" + "<a href='/celebrities/' class='catnav'>" + "Celebrities" + "</a>" + "</span>" 
  + "<span>" + "<a href='/culture/' class='catnav'>" + "Culture" + "</a>" + "</span>" 
  + "<span>" + "<a href='/education/' class='catnav'>" + "Education" + "</a>" + "</span>" 
  + "<span>" + "<a href='/energy/' class='catnav'>" + "Energy" + "</a>" + "</span>" 
  + "<span>" + "<a href='/entertainment/' class='catnav'>" + "Entertainment" + "</a>" + "</span>" 
  + "<span>" + "<a href='/environment/' class='catnav'>" + "Environment" + "</a>" + "</span>" 
  + "<span>" + "<a href='/fashion/' class='catnav'>" + "Fashion" + "</a>" + "</span>" 
  + "<br>" 
  + "<span>" + "<a href='/health/' class='catnav'>" + "Health &amp; Fitness" + "</a>" + "</span>" 
  + "<span>" + "<a href='/humanitarian/' class='catnav'>" + "Humanitarian" + "</a>" + "</span>" 
  + "<span>" + "<a href='/movies/' class='catnav'>" + "Movies" + "</a>" + "</span>" 
  + "<span>" + "<a href='/music/' class='catnav'>" + "Music" + "</a>" + "</span>"
  + "<span>" + "<a href='/hollywood/' class='catnav'>" + "Hollywood" + "</a>" + "</span>"

  + "<span>" + "<a href='/newyork/' class='catnav'>" + "New York City" + "</a>" + "</span>" 
  + "<span>" + "<a href='/scienceandtech/' class='catnav'>" + "Science &amp; Technology" + "</a>" + "</span>" 
  + "<span>" + "<a href='/sports/' class='catnav'>" + "Sports" + "</a>" + "</span>"
  + "<span>" + "<a href='/videogames/' class='catnav'>"+ "Video Games" + "</a>" + "</span>"

 document.getElementById("category_header").innerHTML = addHTML;

 var getNav = document.getElementById("navtop").innerHTML;
 var createNav = 
 "<span class='navtop'>" + getNav + "<a href='../' class='navtop'>" + "Home" + "</a>" + "</span>" 
 + "<span class='navtop'>" + "<a href='/contact-us' class='navtop'>" + "Contact Us" + "</a>" + "</span>"
 + "<span class='navtop'>" + "<a href='/our-expertise' class='navtop'>" + "Our Expertise" + "</a>" + "</span>"
 + "<span class='navtop'>" + "<a href='/worldwide-studios-offices/' class='navtop'>" + "Bader TV Worldwide Studios &amp; Offices" + "</a>" + "</span>"
 + "<span class='navtop'>" + "<a href='/careers' class='navtop'>" + "Careers" + "</a>" + "</span>" 
 + "<span class='navtop'>" + "<a href='/urgent-video-requests' class='navtop'>" + "Urgent video Requests" + "</a>" + "</span>"

 document.getElementById("navtop").innerHTML = createNav;

}

参考：[badertv.com]

Answer 1

步骤1：减少重复（制作一个使跨度和标签提供网址和文字的功能。

第2步：使用数组和循环来获取网址和文字。

function makeLink(url, text){
  return "<span><a href='"+url+"' class='catnav'>"+text+"</a></span>";
}
var url = ['/business/','/celebrities/',...];
var text = ['Business','Celebrities',...];
var out = '';
for(var i = 0; i < url.length; i++){
  out += makeLink(url[i],text[i]);
}

添加任何特殊情况，您就已经完成了设置。

Answer 2

在addHTML和createNav中，您只有一个动态变量。连接为什么？

增加：您可以将整个事物放在一个函数中，并在关闭将保存内容的元素的父标记之后调用它（如果两个字符串不是同一个容器，则可以设置两个函数）。

Answer 3

减肥我觉得可能会这样，它会省去几个字节，但我不知道是否值得付出努力。对于加载部分：在body onload中调用它是安全的，因为它可能保证getElementbyId可以工作。如果您将脚本标记放在</body>标记的末尾附近，它可能也会起作用，但在不同的浏览器上，行为可能会有所不同（也就是说已损坏）。

function link(linkText) {
  return "<span><a href='/" + linkText[0] + "/' class='catnav'>" + linkText[1] + "</a></span>";
}

function addHeaders(){ 
var emptyHTML = document.getElementById("category_header").innerHTML, 
    linkTexts = [ 
["broadcast_webcast", "Live Broadcasts &amp; Webcasts"],
["business", "Business"] 
// etc
],
addHtml;

addHtml = new [];
for (i=0;i<linkTexts.length;i += 1) {
  addHtml.push(link(linkTexts[i]));
}

document.getElementById("category_header").innerHTML = addHtml.join("");

// rest of the code 
}

减少javascript代码....用javascript静态页面上的动态标题

3 个答案: