include-html.js

/*!
 * include-html.js v1.0
 *
 * Copyright (c) 2022 motsu
 *
 * Released under the MIT license.
 * see https://opensource.org/licenses/MIT
 */
 function includeHtml(args){
  //ini
  const name_target = args.name_target;
  const src_part = args.src_part;
  const src_id = args.src_id;
  const type_copy = args.type_copy;
  const src_js = args.src_js;
  if(
      (name_target===undefined||typeof name_target!=='string')
      ||(src_part===undefined||typeof src_part!=='string')
      ||(src_id!==undefined&&typeof src_id!=='string')
      ||(src_js!==undefined&&!Array.isArray(src_js))
  ){
    console.error('引数の形式が正しくありません。');
    return;
  }
  //get
  const elements_target = (()=>{
    if(name_target.slice(0,1)=='#'){
      const temp = document.getElementById(name_target.slice(1));
      if(temp===undefined){
        return temp;
      }else{
        return [temp];
      }
    }else if(name_target.slice(0,1)=='.'){
      return document.getElementsByClassName(name_target.slice(1));
    }else{
      return document.getElementsByTagName(name_target);
    }
  })();
  if(elements_target===undefined||elements_target.length===0){
    console.error('インクルード先の要素が存在しません。');
    return;
  }
  //fetch
  fetch(src_part,{
    method: 'get'
  })
  .then(response=>{
    if(!response.ok) throw new Error();
    return response.text();
  })
  .then(text=>{
    //インクルード元の要素取得
    const parser = new DOMParser;
    const doc = parser.parseFromString(text,'text/html');
    let type_inner = false;
    const element_part = (()=>{
      if(src_id===undefined){
        type_inner = true;
        return doc.body;
      }else{
        return doc.getElementById(src_id.replace('#',''));
      }
    })();
    if(element_part===undefined){
      throw new Error('インクルード元の要素が存在しません。');
    }
    //インクルード処理
    if(type_copy==='inner'||type_inner){
      [...elements_target].forEach(el_target=>{
        el_target.innerHTML = element_part.innerHTML;
      });
    }else{
      [...elements_target].forEach(el_target=>{
        el_target.innerHTML = element_part.outerHTML;
      });
    }
    //js処理
    if(src_js!==undefined) getScript();
  })
  .catch(error=>{
    console.error(error);
    [...elements_target].forEach(element=>{
      element.textContent = 'ファイルの取得に失敗しました。';
    });
  });

  function getScript(){
    src_js.forEach(src_js=>{
      fetch(src_js,{
        method: 'get'
      })
      .then(response=>{
        if(!response.ok) throw new Error();
        return response.text();
      })
      .then(text=>{
        const el_script = document.createElement('script');
        el_script.textContent = text;
        document.body.appendChild(el_script);
      })
      .catch(()=>{
        console.error(src_js+'取得に失敗しました。');
      });
    });
  }
}