
# Frontend

## Script Injection

When Wails serves your `index.html`, by default, it will inject 2 script entries into the `<body>` tag to load `/wails/bindings.js`
and `/wails/runtime.js`. These files install the bindings and runtime respectively.

The code below shows where these are injected by default:

```html
<html>
<head>
  <title>injection example</title>
  <link rel="stylesheet" href="/main.css">
  <!--     <script src="/wails/ipc.js"></script> -->
  <!--     <script src="/wails/runtime.js"></script> -->
</head>

<body data-wails-drag>
  <div class="logo"></div>
  <div class="result" id="result">Please enter your name below 👇</div>
  <div class="input-box" id="input" data-wails-no-drag>
    <input class="input" id="name" type="text" autocomplete="off">
    <button class="btn" onclick="greet()">Greet</button>
  </div>

  <script src="/main.js"></script>
</body>

</html>
```

### Overriding Default Script Injection

To provide more flexibility to developers, there is a meta tag that may be used to customise this behaviour:

```html
  <meta name="wails-options" content="[options]">
```

The options are as follows:

| Value                | Description                                       |
| -------------------- | ------------------------------------------------- |
| noautoinjectruntime  | Disable the autoinjection of `/wails/runtime.js`  |
| noautoinjectipc | Disable the autoinjection of `/wails/ipc.js` |
| noautoinject         | Disable all autoinjection of scripts              |

Multiple options may be used provided they are comma seperated.

This code is perfectly valid and operates the same as the autoinjection version:

```html
<html>

<head>
  <title>injection example</title>
  <meta name="wails-options" content="noautoinject">
  <link rel="stylesheet" href="/main.css">
</head>

<body data-wails-drag>
  <div class="logo"></div>
  <div class="result" id="result">Please enter your name below 👇</div>
  <div class="input-box" id="input" data-wails-no-drag>
    <input class="input" id="name" type="text" autocomplete="off">
    <button class="btn" onclick="greet()">Greet</button>
  </div>

  <script src="/wails/ipc.js"></script>
  <script src="/wails/runtime.js"></script>
  <script src="/main.js"></script>
</body>

</html>
```