代码之家 › 专栏 › 技术社区 › Emeasoba Tochi

在另一个html中使用object标记显示网页的更好方法,而不用jquery,只需要普通javascript

javascript

Emeasoba Tochi · 技术社区 · 7 年前

我有一个仪表板,当单击相应的按钮时,我只想更改页面的一部分。虽然这段代码可以工作,但看起来很粗糙,我尝试过使用一些正则表达式,但由于失败,object标记似乎有一些限制。下面是Javascript代码

// This handles the initial dashboard navigation and changes the main id with only the called page
function dashboard(id) {
     main = document.getElementById('main');
switch(id) {
    case 'newMail':
        return main.innerHTML = '<object type="text/html" data="file:///home/tochie/andela_challenge/UI/html/dashboard/sendMail.html"></object>';

    case 'inbox':
        return main.innerHTML = '<object type="text/html" data="file:///home/tochie/andela_challenge/UI/html/dashboard/inboxList.html"></object>';

    case 'sent':
        return main.innerHTML = '<object type="text/html" data="file:///home/tochie/andela_challenge/UI/html/dashboard/sentList.html"></object>';

    case 'draft':
        return main.innerHTML = '<object type="text/html" data="file:///home/tochie/andela_challenge/UI/html/dashboard/draftList.html"></object>';

    case 'deleted':
        return main.innerHTML = '<object type="text/html" data="file:///home/tochie/andela_challenge/UI/html/dashboard/deletedList.html"></object>';

    case 'retracted':
        return main.innerHTML = '<object type="text/html" data="file:///home/tochie/andela_challenge/UI/html/dashboard/retractedList.html"></object>';

    case 'createGroup':
        return main.innerHTML = '<object type="text/html" data="file:///home/tochie/andela_challenge/UI/html/dashboard/createGroup.html"></object>';

    case 'groupList':
        return main.innerHTML = '<object type="text/html" data="file:///home/tochie/andela_challenge/UI/html/dashboard/groupList.html"></object>';

    case 'groupMessage':
        return main.innerHTML = '<object type="text/html" data="file:///home/tochie/andela_challenge/UI/html/dashboard/groupMessage.html"></object>';

    case 'profile':
        return main.innerHTML = '<object type="text/html" data="file:///home/tochie/andela_challenge/UI/html/dashboard/profile.html"></object>';

    default:
        return document;
    }
}

2 回复 | 直到 7 年前

CertainPerformance 7 年前

case s、其值是位于 .html . 例如:

const pageNamesById = {
  newMail: 'sendMail',
  inbox: 'inboxList',
  sent: 'sentList',
  draft: 'draftList',
  deleted: 'deletedList',
  retracted: 'retractedList',
  createGroup: 'createGroup',
  // etc
};
function dashbord(id) {
  const main = document.getElementById('main');
  const pageName = pageNamesById[id];
  if (pageName) {
    main.innerHTML = '<object type="text/html" data="file:///home/tochie/andela_challenge/UI/html/dashboard/' + pageName + '.html"></object>';
  }
}

Bibberty 7 年前

const template = (action) => `<object type="text/html" data="file:///home/tochie/andela_challenge/UI/html/dashboard/${action}.html"></object>`;

// This handles the initial dashboard navigation and changes the main id with only the called page
function dashboard(id) {
  main = document.getElementById('main');
  switch (id) {
    case 'newMail':
      return main.innerHTML = template("sendMail");
    case 'inbox':
    case 'sent':
    case 'draft':
    case 'deleted':
    case 'groupList':
    case 'retracted':
      return main.innerHTML = template(`${id}List`);
    case 'createGroup':
    case 'groupMessage':
    case 'profile':
      return main.innerHTML = template(id);
    default:
      return document;
  }
}

console.log(dashboard('newMail'));
console.log(dashboard('inbox'));
console.log(dashboard('deleted'));
console.log(dashboard('groupMessage'));

<div id="main"></div>