-1

As can be understood by the question I aim to create an html tag that will load an external html file. The files I want to add hold header and footer htmls, styles and scripts. I'm planning to use this on Cordova. I before saw a JQuery Mobile theme using custom html tags that include external html files for header and footer. Yet, I couldn't find a resource that explained this. How can I achieve this?

Edit: The question is not on including an external html file. It is on creating a custom tag that does that.

Rookie
  • 175
  • 1
  • 4
  • 19
  • Would an ` – zgood Oct 05 '17 at 16:18
  • Have you installed any plugins? Did you install the core plugins?https://cordova.apache.org/docs/en/latest/guide/overview/ – ciammarino Oct 05 '17 at 16:24
  • 1
    We are always glad to help and support new coders but ***you need to help yourself first. :-)*** After [**doing more research**](https://meta.stackoverflow.com/q/261592/1011527) if you have a problem **post what you've tried** with a **clear explanation of what isn't working** and provide [a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). Read [How to Ask](http://stackoverflow.com/help/how-to-ask) a good question. Be sure to [take the tour](http://stackoverflow.com/tour) and read [this](https://meta.stackoverflow.com/q/347937/1011527). – Jay Blanchard Oct 05 '17 at 16:33
  • If you look at the question, the main issue is not including external html file. The main issue is creating a custom tag that does this. – Rookie Oct 06 '17 at 05:35

2 Answers2

1

If you are using JQuery

$("#displayPage").load("page.html");

This loads the HTML into the element with the id: displayPage

Also, see this answer: https://stackoverflow.com/a/20868400/4064004

Using server side includes you can:

<html><head><title>Test</title></head>
<body>
    <!--#include file="navbar.shtml" -->
</body>
</html>

navbar.shtml

<ul class="nav">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
</ul>
silversunhunter
  • 1,219
  • 2
  • 12
  • 32
  • Thank you sir I know how to load an external html file via jQuery, but how to combine this with javascript registerElement() to create custom tags. – Rookie Oct 05 '17 at 16:46
  • @HalilKaragöz do you really need custom tags? I think using ID's is a simpler way to have cross-browser support – NoOorZ24 Oct 06 '17 at 06:12
  • @NoOorZ24 You are right about cross-platform support but using pure javascript to create custom tags can't I achieve cross platform support? – Rookie Oct 07 '17 at 14:52
0

You can use an iframe tag to load that html file. but as you may know each iframe takes its own resources so in a mobile app this can be pitfall.
You can also use jquery as

$('#selector').load('html_file.html');

this can be a good alternative.

The third option that I recommend you is moving that dynamic loading of contents to backend code and not concerning it in the front.

What I mean by this is that you should aim for loading those files and assembling page's parts together in the code that is supporting the UI (I dont know how cordoav works but the concept is applicable) not in the UI itself as in that case you are slowing down the UI and are also complicating things up.

So, aim for statically loading all page at once and use dynamic changing of page as low as possible.

Amir Hossein Baghernezad
  • 3,616
  • 27
  • 28
  • So how do I create a custom tag that does this? I know it's possible because I saw it in a jquery mobile theme – Rookie Oct 06 '17 at 05:36