mirror of
https://github.com/wailsapp/wails.git
synced 2025-05-01 20:50:43 +08:00
76 lines
2.2 KiB
Plaintext
76 lines
2.2 KiB
Plaintext
# Frontend
|
|
|
|
## Script Injection
|
|
|
|
When Wails serves your `index.html`, by default, it will inject 2 script entries into the `<body>` tag to load `/wails/ipc.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>
|
|
```
|