Anyway to include file in HTML for meta settings? – Ios swift

I have updated this Q many times. It is too long. Therefore, I wrote a blog on this issue with more information.

I am working on iOS project with html files to be loaded to view controller.

Here is a snapshot of my html files:

The above shows n html files defined in my project. Each one will be will be used as data source to a view controller to display html content.

iOS project does good job for localization. Each html can be localized as supported languages in a project. Right now three languages are supported, and a base, so total of 4 for each html file.

As you can see that I have n x 4 html files, and I may add more html and other language support in the project.

I am using html for view controllers based on iOS support & framework. WKWebView is a view that is able to display html content in a UI view.

Here are some codes to show how a view controller loads html content:

class MyHTML1ViewController: UIViewController {
   private var webView: WKWebView!
   var htmlFile: String = "" // default value, can be changed
   override func viewDidLoad() {
    super.viewDidLoad()
    let url = Bundle.main.url(
            forResource: htmlFile,
            withExtension: "html")

    let request = URLRequest(url: url)
    webViewBase.load(request)
  }
...
}

When I need to use this class to show html file in WKWebView, I create this view controller, and set hmltFile property, for example, a string of "myHTML1.html". Then the view controller will display html content in iOS app.

In this sense, my project is a html server host all html files, js, css, image files. WKWebView viewer or view controller with WKWebView is a client. My iOS app built by the project does not provide web service for enteral access. In other words, my app does not provide html end point for external access. It is just based on html technology to present html content in views in my iOS app.

I think that all above brief information explains how html server/client works, and my working environment. The tool I am using is Xcode, and the program language is Swift.

html files can be added to my project and they can be localized. When localized, they are in subfolder named as language identifier. All images, css files are localized as well, and those files are in the same folder of html file. js file is up one level from html folder. That’s basically the file structure for all html related files.

Please allow me to add more background information about my Q. Based on comments and advice, I have updated this Q many times to clarify my working environment and so-called web server/client case. Actually, when I asked my friends about this Q, they had similar questions, and I had to explain it.

I think that with all my efforts to update info in comments and in my Q, it is clear that I do need a better way to manage head settings. I also added my work strategies here and in the comments.

Based on only two answer posts and comments(unfortunately, no more after the Q is in "closed" status), I have found a solution. It works as expected in my iOS app.

I have been on SO for 13 years. I love this member-supported community. The reason I made an effort to add updates is that I believe this question might be helpful for others, just like my other posts, which impacted on 6.3m people with my positive effort. You can give my Q points, either positive or negative, just be objective. Any comments and advice are welcome. Please click the "Reopen" link underneath this Q. With enough reopen requests, the SO community will review this Q and make their objective decision. I think this Q may help or benefit other people in the long run.

Allow me to add a concrete and related background story about the Q (sorry to ad my app here, but as a concrete case). TapToCount-3W is an iOS app I created. I am a very tech-savvy person. Even though I had a very creative idea to create the iOS app, the app provides very poor UI interaction. I had to spend time explaining it. When users understand my idea, they just love the app. The app is a native iOS app. It does not provide any external web services.

That’s why I am working on the next update to bring more information to the app. I could use a rich text viewer, attributed strings, or just pure text strings with images. None of them I like in terms of presenting information. Fortunately, Apple provides very good html content support within the iOS project. By using WKWebViwer, html files can be loaded into a view controller, which can be a view screen. All html features, js, css, images are supported, as well as good framework support for multiple languages.

Another reason I added html content views in my project is that I could better present information with dynamic text size, zooming feature with meta settings, expand/collapse support by using js (if the user doesn’t want to read massive text again), and image enlargement feature by js, and many more. In this sense, you could imagine that my project does provide a kind of full-featured web server/client environment. However, it does have some limitations(not allowing change file content in the project bundle, as an example, as I have described in my comments).

That’s why I am going to use this html strategy to present useful information in my app. I’ll add more in future updates.

One issue that I encountered as presented in this Q is that all html files with multiple languages (n files x m languages) have a common block of tags (meta, link…) in the html document.head section. I am a tech perfectionist to keep my codes better maintained. I actually had some issues with some languages when I forgot to copy and paste those updated common settings.

You can see my upcoming update information (one as an example) in the link 3. This is a pdf file as a reference. Actually, in my iOS app, the html content is displayed very nicely and user friendly.

Sorry for this long background and the lengthy explanation.

Back to my question

As above description of my working environment, there is no need for me to include other js libraries or PHP engines in my project. What I need is find out a better way to inject meta tags into my html head section, by js or html support.

All those html files(nx4 for the time being) have almost identical meta tags in the head section. I could just copy and paste meta tags into all those html files. However, if there something needs to be changed later on, I have to change all of them one-by-one.

That’s why I try to find out a way to place/inject identical meta tags in one place or file and loaded it into html head section.

Currently, all html files have the following common meta settings:

 <head>
    <meta charset="UTF-8" />
    <meta name="viewport"
    content="user-scalable=yes,
      initial-scale=1, maximum-scale=2.5,
      minimum-scale=0.8,
      width=device-width,
      height=device-height,
      target-densitydpi=device-dpi" />
    <link rel="stylesheet" href="html_stylesheet.css" />
    ...
 </head>

Is there any way to include a file for meta and other common tag settings, just in the same way as link for css setting? For example:

 <head>
    <meta href="mymeta.html" />
    <line rel="stylesheet" href="html_stylesheet.css" />
    ...
 </head>

In this clean way, I don’t need to duplicate same meta & other settings over all my html files.

MY ANSWER

Based on @"Laaouatni Anas" solution, I think I got an answer. Follow @"Laaouatni Anas"’s steps to set up js file, but I changed it(it may be recursive calls to js again and again to add meta & other tags multiple times).

let metaSettings = `
  <meta name='viewport'
  content='user-scalable=yes,
  initial-scale=1,
  maximum-scale=2.5,
  minimum-scale=0.8,
  width=device-width,
  height=device-height,
  target-densitydpi=device-dpi' />
<link rel="stylesheet" href="html_stylesheet.css" />
`;

// Remove the script from head first
let elmt = document.getElementById("tempScript");
if(typeof(elmt) != 'undefined' && elmt != null) {
  elmt.parentNode.removeChild(elmt);
}
// insert meta tags and other tags to head section
document.head.innerHTML += metaSettings;

and here is my head settings in HTML:

<head>
    <!-- meta charset has to be here. Not inject
    from js script -->
    <meta charset='UTF-8'/>
    <!-- Load meta settings from script -->
    <script id="tempScript" type="text/javascript"
        src="../html_headSettings.js"></script>
    <!-- other special settings  -->
    <!-- ...  -->
    <title>Information</title>
</head>

Here I add id="tempScript" so that this injection script can be removed on the first load and add other settings.

The key point is that I have to leave the tag in all my html files:

 <meta charset='UTF-8'/>

In this way, I can inject whatever settings else I need into the head section and my app runs as expected (all my support languages are displayed as expected).

I think that this special meta setting has to be static in the html head section, not through injection. At least my iOS viewer would not know what language charset is at the start. As a result, the other language chars are displayed in messed up chars (most of them are not 128 ascii chars).