iframe-coordinator-cli 6.5.0 → 6.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/{index-DkVijnku.js → index-DejhDHus.js} +3 -3
- package/dist/ifc-docs/assets/hierarchy.js +1 -1
- package/dist/ifc-docs/assets/highlight.css +130 -91
- package/dist/ifc-docs/assets/icons.js +20 -17
- package/dist/ifc-docs/assets/icons.svg +1 -1
- package/dist/ifc-docs/assets/main.js +2535 -5
- package/dist/ifc-docs/assets/navigation.js +2 -1
- package/dist/ifc-docs/assets/search.js +2 -1
- package/dist/ifc-docs/assets/style.css +1571 -1581
- package/dist/ifc-docs/classes/client.Client.html +2388 -98
- package/dist/ifc-docs/classes/client.WorkerClient.html +2161 -92
- package/dist/ifc-docs/classes/host.FrameRouterElement.html +850 -24
- package/dist/ifc-docs/classes/host.WorkerPool.html +879 -29
- package/dist/ifc-docs/documents/client-setup.html +579 -75
- package/dist/ifc-docs/functions/host.registerCustomElements.html +218 -3
- package/dist/ifc-docs/hierarchy.html +168 -1
- package/dist/ifc-docs/index.html +432 -31
- package/dist/ifc-docs/interfaces/client.ClientConfigOptions.html +331 -4
- package/dist/ifc-docs/interfaces/client.EventEmitter.html +752 -14
- package/dist/ifc-docs/interfaces/host.ClientConfig.html +399 -7
- package/dist/ifc-docs/interfaces/host.ClientRegistration.html +580 -24
- package/dist/ifc-docs/interfaces/host.RoutingMap.html +211 -4
- package/dist/ifc-docs/interfaces/host.WorkerAppData.html +388 -6
- package/dist/ifc-docs/interfaces/host.WorkerConfig.html +398 -7
- package/dist/ifc-docs/interfaces/host.WorkerItem.html +401 -6
- package/dist/ifc-docs/interfaces/host.WorkerRegistry.html +210 -2
- package/dist/ifc-docs/interfaces/messages.Breadcrumb.html +373 -6
- package/dist/ifc-docs/interfaces/messages.EnvData.html +510 -11
- package/dist/ifc-docs/interfaces/messages.KeyData.html +540 -12
- package/dist/ifc-docs/interfaces/messages.ModalRequest.html +381 -6
- package/dist/ifc-docs/interfaces/messages.NavRequest.html +390 -9
- package/dist/ifc-docs/interfaces/messages.Notification.html +435 -9
- package/dist/ifc-docs/interfaces/messages.PageMetadata.html +438 -8
- package/dist/ifc-docs/interfaces/messages.PromptOnLeave.html +390 -9
- package/dist/ifc-docs/interfaces/messages.Publication.html +443 -11
- package/dist/ifc-docs/modules/client.html +742 -2
- package/dist/ifc-docs/modules/host.html +647 -1
- package/dist/ifc-docs/modules/messages.html +462 -1
- package/dist/ifc-docs/modules.html +359 -1
- package/dist/ifc-docs/types/client.EnvDataHandler.html +239 -1
- package/dist/ifc-docs/types/client.EventHandler.html +247 -2
- package/dist/index.html +1 -1
- package/package.json +3 -3
package/dist/ifc-docs/index.html
CHANGED
|
@@ -1,43 +1,444 @@
|
|
|
1
|
-
<!
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
<
|
|
5
|
-
<
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html class="default" lang="en" data-base="./">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta http-equiv="x-ua-compatible" content="IE=edge" />
|
|
6
|
+
<title>iframe-coordinator - v6.5.1</title>
|
|
7
|
+
<meta name="description" content="Documentation for iframe-coordinator" />
|
|
8
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
9
|
+
<link rel="stylesheet" href="assets/style.css" />
|
|
10
|
+
<link rel="stylesheet" href="assets/highlight.css" />
|
|
11
|
+
<script defer src="assets/main.js"></script>
|
|
12
|
+
<script async src="assets/icons.js" id="tsd-icons-script"></script>
|
|
13
|
+
<script async src="assets/search.js" id="tsd-search-script"></script>
|
|
14
|
+
<script async src="assets/navigation.js" id="tsd-nav-script"></script>
|
|
15
|
+
</head>
|
|
16
|
+
<body>
|
|
17
|
+
<script>
|
|
18
|
+
document.documentElement.dataset.theme =
|
|
19
|
+
localStorage.getItem("tsd-theme") || "os";
|
|
20
|
+
document.body.style.display = "none";
|
|
21
|
+
setTimeout(
|
|
22
|
+
() =>
|
|
23
|
+
window.app
|
|
24
|
+
? app.showPage()
|
|
25
|
+
: document.body.style.removeProperty("display"),
|
|
26
|
+
500,
|
|
27
|
+
);
|
|
28
|
+
</script>
|
|
29
|
+
<header class="tsd-page-toolbar">
|
|
30
|
+
<div class="tsd-toolbar-contents container">
|
|
31
|
+
<a href="index.html" class="title">iframe-coordinator - v6.5.1</a>
|
|
32
|
+
<div id="tsd-toolbar-links"></div>
|
|
33
|
+
<button id="tsd-search-trigger" class="tsd-widget" aria-label="Search">
|
|
34
|
+
<svg
|
|
35
|
+
width="16"
|
|
36
|
+
height="16"
|
|
37
|
+
viewBox="0 0 16 16"
|
|
38
|
+
fill="none"
|
|
39
|
+
aria-hidden="true"
|
|
40
|
+
>
|
|
41
|
+
<use href="assets/icons.svg#icon-search"></use>
|
|
42
|
+
</svg>
|
|
43
|
+
</button>
|
|
44
|
+
<dialog id="tsd-search" aria-label="Search">
|
|
45
|
+
<input
|
|
46
|
+
role="combobox"
|
|
47
|
+
id="tsd-search-input"
|
|
48
|
+
aria-controls="tsd-search-results"
|
|
49
|
+
aria-autocomplete="list"
|
|
50
|
+
aria-expanded="true"
|
|
51
|
+
autocapitalize="off"
|
|
52
|
+
autocomplete="off"
|
|
53
|
+
placeholder="Search the docs"
|
|
54
|
+
maxlength="100"
|
|
55
|
+
/>
|
|
56
|
+
<ul role="listbox" id="tsd-search-results"></ul>
|
|
57
|
+
<div id="tsd-search-status" aria-live="polite" aria-atomic="true">
|
|
58
|
+
<div>Preparing search index...</div>
|
|
59
|
+
</div>
|
|
60
|
+
</dialog>
|
|
61
|
+
<a
|
|
62
|
+
href="#"
|
|
63
|
+
class="tsd-widget menu"
|
|
64
|
+
id="tsd-toolbar-menu-trigger"
|
|
65
|
+
data-toggle="menu"
|
|
66
|
+
aria-label="Menu"
|
|
67
|
+
><svg
|
|
68
|
+
width="16"
|
|
69
|
+
height="16"
|
|
70
|
+
viewBox="0 0 16 16"
|
|
71
|
+
fill="none"
|
|
72
|
+
aria-hidden="true"
|
|
73
|
+
>
|
|
74
|
+
<use href="assets/icons.svg#icon-menu"></use></svg
|
|
75
|
+
></a>
|
|
76
|
+
</div>
|
|
77
|
+
</header>
|
|
78
|
+
<div class="container container-main">
|
|
79
|
+
<div class="col-content">
|
|
80
|
+
<div class="tsd-page-title"><h1>iframe-coordinator - v6.5.1</h1></div>
|
|
81
|
+
<div class="tsd-panel tsd-typography">
|
|
82
|
+
<h1 id="iframe-coordinator" class="tsd-anchor-link">
|
|
83
|
+
iframe-coordinator<a
|
|
84
|
+
href="#iframe-coordinator"
|
|
85
|
+
aria-label="Permalink"
|
|
86
|
+
class="tsd-anchor-icon"
|
|
87
|
+
><svg viewBox="0 0 24 24" aria-hidden="true">
|
|
88
|
+
<use href="assets/icons.svg#icon-anchor"></use></svg
|
|
89
|
+
></a>
|
|
90
|
+
</h1>
|
|
91
|
+
<p>
|
|
92
|
+
Tools for coordinating independent single-page-apps embedded via
|
|
93
|
+
iframe
|
|
94
|
+
</p>
|
|
95
|
+
<h2 id="why-would-i-want-to-do-that" class="tsd-anchor-link">
|
|
96
|
+
Why would I want to do that?<a
|
|
97
|
+
href="#why-would-i-want-to-do-that"
|
|
98
|
+
aria-label="Permalink"
|
|
99
|
+
class="tsd-anchor-icon"
|
|
100
|
+
><svg viewBox="0 0 24 24" aria-hidden="true">
|
|
101
|
+
<use href="assets/icons.svg#icon-anchor"></use></svg
|
|
102
|
+
></a>
|
|
103
|
+
</h2>
|
|
104
|
+
<p>
|
|
105
|
+
Iframes are the only way to obtain strong isolation of the
|
|
106
|
+
javascript runtime in a browser. This is useful for organizations
|
|
107
|
+
with multiple teams shipping interfaces for different features.
|
|
108
|
+
Teams can ship with confidence, knowing errors in other's code won't
|
|
109
|
+
crash their interface.
|
|
110
|
+
</p>
|
|
111
|
+
<p>
|
|
112
|
+
Embedding applications via iframe also means that code from separate
|
|
113
|
+
teams can be deployed and rolled back independently, limiting the
|
|
114
|
+
impact of breaking changes.
|
|
115
|
+
</p>
|
|
116
|
+
<h2 id="how-do-i-use-it" class="tsd-anchor-link">
|
|
117
|
+
How do I use it?<a
|
|
118
|
+
href="#how-do-i-use-it"
|
|
119
|
+
aria-label="Permalink"
|
|
120
|
+
class="tsd-anchor-icon"
|
|
121
|
+
><svg viewBox="0 0 24 24" aria-hidden="true">
|
|
122
|
+
<use href="assets/icons.svg#icon-anchor"></use></svg
|
|
123
|
+
></a>
|
|
124
|
+
</h2>
|
|
125
|
+
<h3 id="host-application-example" class="tsd-anchor-link">
|
|
126
|
+
Host Application Example<a
|
|
127
|
+
href="#host-application-example"
|
|
128
|
+
aria-label="Permalink"
|
|
129
|
+
class="tsd-anchor-icon"
|
|
130
|
+
><svg viewBox="0 0 24 24" aria-hidden="true">
|
|
131
|
+
<use href="assets/icons.svg#icon-anchor"></use></svg
|
|
132
|
+
></a>
|
|
133
|
+
</h3>
|
|
134
|
+
<p><strong>JavaScript</strong></p>
|
|
135
|
+
<pre><code class="js"><span class="hl-0">/*</span><br/><span class="hl-0"> * We require a few polyfills in order to support IE11. These</span><br/><span class="hl-0"> * will be needed to be loaded by both the host and the client.</span><br/><span class="hl-0"> */</span><br/><span class="hl-1">import</span><span class="hl-2"> </span><span class="hl-3">"@babel/polyfill"</span><span class="hl-2">;</span><br/><span class="hl-1">import</span><span class="hl-2"> </span><span class="hl-3">"custom-event-polyfill/polyfill.js"</span><span class="hl-2">;</span><br/><span class="hl-1">import</span><span class="hl-2"> </span><span class="hl-3">"url-polyfill"</span><span class="hl-2">;</span><br/><br/><span class="hl-0">/* The iframe coordinator library uses custom elements to</span><br/><span class="hl-0"> * embed itself in the host app. If you are targeting browsers</span><br/><span class="hl-0"> * that don't support custom elements, you'll need a polyfill.</span><br/><span class="hl-0"> * see: https://github.com/webcomponents/custom-elements for</span><br/><span class="hl-0"> * more details on configuring the polyfill</span><br/><span class="hl-0"> */</span><br/><span class="hl-1">import</span><span class="hl-2"> </span><span class="hl-3">"@webcomponents/custom-elements/src/native-shim.js"</span><span class="hl-2">;</span><br/><span class="hl-1">import</span><span class="hl-2"> </span><span class="hl-3">"@webcomponents/custom-elements/src/custom-elements.js"</span><span class="hl-2">;</span><br/><br/><span class="hl-0">/* Import the host library */</span><br/><span class="hl-1">import</span><span class="hl-2"> { </span><span class="hl-4">registerCustomElements</span><span class="hl-2"> } </span><span class="hl-1">from</span><span class="hl-2"> </span><span class="hl-3">"iframe-coordinator/host.js"</span><span class="hl-2">;</span><br/><br/><span class="hl-0">/* This will make the custom element `frame-router` available</span><br/><span class="hl-0"> * for use in your browser. This element is the primary</span><br/><span class="hl-0"> * host interface for the library.</span><br/><span class="hl-0"> */</span><br/><span class="hl-5">registerCustomElements</span><span class="hl-2">();</span><br/><br/><span class="hl-0">/* The frame router configuration can be set up by setting the</span><br/><span class="hl-0"> * `clientConfig` property on the frame-router element.</span><br/><span class="hl-0"> * This registers two client apps with the `frame-router`.</span><br/><span class="hl-0"> * `assignedRoute` is the fragment path in the current page that represents the root</span><br/><span class="hl-0"> * path for that client. `url` is the page to load in the</span><br/><span class="hl-0"> * iframe on that route. It must be a full Url, but you can</span><br/><span class="hl-0"> * use the URL constructor to simplify handling</span><br/><span class="hl-0"> * clients on the same domain.</span><br/><span class="hl-0"> * (e.g. `new URL('/client/app/path/', window.location).toString()`)</span><br/><span class="hl-0"> *</span><br/><span class="hl-0"> * If the client uses fragment-based routing, the URL should include a hash fragment:</span><br/><span class="hl-0"> * http://example.com/client/#/</span><br/><span class="hl-0"> *</span><br/><span class="hl-0"> * if the client uses pushstate path-based routing, leave the fragment out:</span><br/><span class="hl-0"> * e.g. http://example.com/client/</span><br/><span class="hl-0"> */</span><br/><br/><span class="hl-4">frameRouter</span><span class="hl-2">.</span><span class="hl-4">clientConfig</span><span class="hl-2"> = {</span><br/><span class="hl-2"> </span><span class="hl-4">clients:</span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-4">application1:</span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-4">url:</span><span class="hl-2"> </span><span class="hl-3">`http://</span><span class="hl-6">${</span><span class="hl-4">hostname</span><span class="hl-6">}</span><span class="hl-3">:8080/client-app-1/#/`</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-4">assignedRoute:</span><span class="hl-2"> </span><span class="hl-3">"/app1"</span><span class="hl-2">,</span><br/><span class="hl-2"> },</span><br/><span class="hl-2"> </span><span class="hl-4">application2:</span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-4">url:</span><span class="hl-2"> </span><span class="hl-3">`http://</span><span class="hl-6">${</span><span class="hl-4">hostname</span><span class="hl-6">}</span><span class="hl-3">:8080/client-app-2/#/`</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-4">assignedRoute:</span><span class="hl-2"> </span><span class="hl-3">"/app2"</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-4">allow:</span><span class="hl-2"> </span><span class="hl-3">"camera http://localhost:8080;"</span><span class="hl-2">, </span><span class="hl-0">// optional</span><br/><span class="hl-2"> </span><span class="hl-4">sandbox:</span><span class="hl-2"> </span><span class="hl-3">"allow-presentation allow-modals"</span><span class="hl-2">, </span><span class="hl-0">// optional</span><br/><span class="hl-2"> </span><span class="hl-4">defaultTitle:</span><span class="hl-2"> </span><span class="hl-3">"iframe Application 2 Example"</span><span class="hl-2">, </span><span class="hl-0">// optional, but needed for accessibility</span><br/><span class="hl-2"> },</span><br/><span class="hl-2"> },</span><br/><span class="hl-2"> </span><span class="hl-4">envData:</span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-4">locale:</span><span class="hl-2"> </span><span class="hl-3">"en-US"</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-4">hostRootUrl:</span><span class="hl-2"> </span><span class="hl-4">window</span><span class="hl-2">.</span><span class="hl-4">location</span><span class="hl-2">.</span><span class="hl-4">origin</span><span class="hl-2"> + </span><span class="hl-3">"/#/"</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-4">registeredKeys:</span><span class="hl-2"> [</span><br/><span class="hl-2"> { </span><span class="hl-4">key:</span><span class="hl-2"> </span><span class="hl-3">"a"</span><span class="hl-2">, </span><span class="hl-4">ctrlKey:</span><span class="hl-2"> </span><span class="hl-6">true</span><span class="hl-2"> },</span><br/><span class="hl-2"> { </span><span class="hl-4">key:</span><span class="hl-2"> </span><span class="hl-3">"b"</span><span class="hl-2">, </span><span class="hl-4">altKey:</span><span class="hl-2"> </span><span class="hl-6">true</span><span class="hl-2"> },</span><br/><span class="hl-2"> { </span><span class="hl-4">key:</span><span class="hl-2"> </span><span class="hl-3">"a"</span><span class="hl-2">, </span><span class="hl-4">ctrlKey:</span><span class="hl-2"> </span><span class="hl-6">true</span><span class="hl-2">, </span><span class="hl-4">shiftKey:</span><span class="hl-2"> </span><span class="hl-6">true</span><span class="hl-2"> },</span><br/><span class="hl-2"> ],</span><br/><span class="hl-2"> </span><span class="hl-4">custom:</span><span class="hl-2"> </span><span class="hl-5">getCustomClientData</span><span class="hl-2">(),</span><br/><span class="hl-2"> },</span><br/><span class="hl-2">};</span>
|
|
6
136
|
</code><button type="button">Copy</button></pre>
|
|
7
137
|
|
|
8
|
-
<p><strong>HTML/DOM</strong></p>
|
|
9
|
-
<p>
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<
|
|
13
|
-
|
|
138
|
+
<p><strong>HTML/DOM</strong></p>
|
|
139
|
+
<p>
|
|
140
|
+
Once the <code>frame-router</code> element is rendered and the
|
|
141
|
+
client apps configured via setting the
|
|
142
|
+
<code>clientConfig</code> property, navigation between and within
|
|
143
|
+
client apps is done by changing the element's
|
|
144
|
+
<code>route</code> attribute. In the example below, based on the
|
|
145
|
+
previously shown configuration, the frame router will show show the
|
|
146
|
+
URL at:<br />
|
|
147
|
+
<a href="https://example.com/components/example1/#/my/path"
|
|
148
|
+
>https://example.com/components/example1/#/my/path</a
|
|
149
|
+
>
|
|
150
|
+
</p>
|
|
151
|
+
<pre><code class="html"><span class="hl-7"><</span><span class="hl-8">body</span><span class="hl-7">></span><br/><span class="hl-2"> </span><span class="hl-0"><!-- host-app stuff --></span><br/><span class="hl-2"> </span><span class="hl-7"><</span><span class="hl-8">frame-router</span><br/><span class="hl-2"> </span><span class="hl-9">id</span><span class="hl-2">=</span><span class="hl-10">"frame-element"</span><br/><span class="hl-2"> </span><span class="hl-9">route</span><span class="hl-2">=</span><span class="hl-10">"/one/my/path"</span><br/><span class="hl-2"> </span><span class="hl-9">frame-id</span><span class="hl-2">=</span><span class="hl-10">"id-for-child-iframe"</span><br/><span class="hl-2"> </span><span class="hl-7">/></span><br/><span class="hl-2"> </span><span class="hl-0"><!-- more host-app stuff --></span><br/><span class="hl-7"></</span><span class="hl-8">body</span><span class="hl-7">></span>
|
|
14
152
|
</code><button type="button">Copy</button></pre>
|
|
15
153
|
|
|
16
|
-
<h3 id="client-application-setup" class="tsd-anchor-link">
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
<
|
|
154
|
+
<h3 id="client-application-setup" class="tsd-anchor-link">
|
|
155
|
+
Client Application Setup<a
|
|
156
|
+
href="#client-application-setup"
|
|
157
|
+
aria-label="Permalink"
|
|
158
|
+
class="tsd-anchor-icon"
|
|
159
|
+
><svg viewBox="0 0 24 24" aria-hidden="true">
|
|
160
|
+
<use href="assets/icons.svg#icon-anchor"></use></svg
|
|
161
|
+
></a>
|
|
162
|
+
</h3>
|
|
163
|
+
<p>See the client module docs for detailed setup instructions.</p>
|
|
164
|
+
<h3 id="local-client-application-development" class="tsd-anchor-link">
|
|
165
|
+
Local Client Application Development<a
|
|
166
|
+
href="#local-client-application-development"
|
|
167
|
+
aria-label="Permalink"
|
|
168
|
+
class="tsd-anchor-icon"
|
|
169
|
+
><svg viewBox="0 0 24 24" aria-hidden="true">
|
|
170
|
+
<use href="assets/icons.svg#icon-anchor"></use></svg
|
|
171
|
+
></a>
|
|
172
|
+
</h3>
|
|
173
|
+
<p>
|
|
174
|
+
When working on a client application locally, or running automated
|
|
175
|
+
selenium tests, it can be burdensome to bootstrap a fully featured
|
|
176
|
+
host-application just to work on the client app feature. To help
|
|
177
|
+
with this, the iframe-coordinator library also provides a
|
|
178
|
+
command-line utility <code>ifc-cli</code> which can spin up a local
|
|
179
|
+
bare-bones host application. Documentation is always available via
|
|
180
|
+
<code>ifc-cli --help</code>:
|
|
181
|
+
</p>
|
|
182
|
+
<pre><code><span class="hl-11">Usage</span><span class="hl-2">: </span><span class="hl-4">ifc</span><span class="hl-2">-</span><span class="hl-4">cli</span><span class="hl-2"> [</span><span class="hl-4">options</span><span class="hl-2">]</span><br/><br/><span class="hl-11">Options</span><span class="hl-2">:</span><br/><span class="hl-2"> -</span><span class="hl-4">f</span><span class="hl-2">, --</span><span class="hl-4">config</span><span class="hl-2">-</span><span class="hl-4">file</span><span class="hl-2"> <</span><span class="hl-4">file</span><span class="hl-2">> </span><span class="hl-4">iframe</span><span class="hl-2"> </span><span class="hl-4">client</span><span class="hl-2"> </span><span class="hl-4">configuration</span><span class="hl-2"> </span><span class="hl-5">file</span><span class="hl-2"> (</span><span class="hl-4">default</span><span class="hl-2">: </span><span class="hl-3">"/home/mcheely/projects/iframe-coordinator/ifc-cli.config.js"</span><span class="hl-2">)</span><br/><span class="hl-2"> -</span><span class="hl-4">p</span><span class="hl-2">, --</span><span class="hl-4">port</span><span class="hl-2"> <</span><span class="hl-4">port_num</span><span class="hl-2">> </span><span class="hl-4">port</span><span class="hl-2"> </span><span class="hl-4">number</span><span class="hl-2"> </span><span class="hl-4">to</span><span class="hl-2"> </span><span class="hl-4">host</span><span class="hl-2"> </span><span class="hl-5">on</span><span class="hl-2"> (</span><span class="hl-4">default</span><span class="hl-2">: </span><span class="hl-12">3000</span><span class="hl-2">)</span><br/><span class="hl-2"> -</span><span class="hl-4">s</span><span class="hl-2">, --</span><span class="hl-4">ssl</span><span class="hl-2"> </span><span class="hl-4">serve</span><span class="hl-2"> </span><span class="hl-4">over</span><span class="hl-2"> </span><span class="hl-4">https</span><br/><span class="hl-2"> --</span><span class="hl-4">ssl</span><span class="hl-2">-</span><span class="hl-4">cert</span><span class="hl-2"> <</span><span class="hl-4">cert_path</span><span class="hl-2">> </span><span class="hl-4">certificate</span><span class="hl-2"> </span><span class="hl-4">file</span><span class="hl-2"> </span><span class="hl-4">to</span><span class="hl-2"> </span><span class="hl-4">use</span><span class="hl-2"> </span><span class="hl-4">for</span><span class="hl-2"> </span><span class="hl-4">https</span><br/><span class="hl-2"> --</span><span class="hl-4">ssl</span><span class="hl-2">-</span><span class="hl-4">key</span><span class="hl-2"> <</span><span class="hl-4">key_path</span><span class="hl-2">> </span><span class="hl-4">key</span><span class="hl-2"> </span><span class="hl-4">file</span><span class="hl-2"> </span><span class="hl-4">to</span><span class="hl-2"> </span><span class="hl-4">use</span><span class="hl-2"> </span><span class="hl-4">for</span><span class="hl-2"> </span><span class="hl-4">https</span><br/><span class="hl-2"> -</span><span class="hl-4">h</span><span class="hl-2">, --</span><span class="hl-4">help</span><span class="hl-2"> </span><span class="hl-4">output</span><span class="hl-2"> </span><span class="hl-4">usage</span><span class="hl-2"> </span><span class="hl-4">information</span><br/><br/><span class="hl-2"> </span><span class="hl-4">This</span><span class="hl-2"> </span><span class="hl-4">program</span><span class="hl-2"> </span><span class="hl-4">will</span><span class="hl-2"> </span><span class="hl-4">start</span><span class="hl-2"> </span><span class="hl-4">a</span><span class="hl-2"> </span><span class="hl-4">server</span><span class="hl-2"> </span><span class="hl-4">for</span><span class="hl-2"> </span><span class="hl-4">a</span><span class="hl-2"> </span><span class="hl-4">basic</span><span class="hl-2"> </span><span class="hl-4">iframe</span><span class="hl-2">-</span><span class="hl-4">coordinator</span><span class="hl-2"> </span><span class="hl-4">host</span><span class="hl-2"> </span><span class="hl-4">app</span><span class="hl-2">. </span><span class="hl-4">In</span><br/><span class="hl-2"> </span><span class="hl-4">order</span><span class="hl-2"> </span><span class="hl-4">to</span><span class="hl-2"> </span><span class="hl-4">configure</span><span class="hl-2"> </span><span class="hl-4">the</span><span class="hl-2"> </span><span class="hl-4">frame</span><span class="hl-2">-</span><span class="hl-4">router</span><span class="hl-2"> </span><span class="hl-4">element</span><span class="hl-2"> </span><span class="hl-4">and</span><span class="hl-2"> </span><span class="hl-4">any</span><span class="hl-2"> </span><span class="hl-4">other</span><span class="hl-2"> </span><span class="hl-4">custom</span><span class="hl-2"> </span><span class="hl-4">logic</span><span class="hl-2"> </span><span class="hl-4">needed</span><br/><span class="hl-2"> </span><span class="hl-6">in</span><span class="hl-2"> </span><span class="hl-4">the</span><span class="hl-2"> </span><span class="hl-4">host</span><span class="hl-2"> </span><span class="hl-4">app</span><span class="hl-2">, </span><span class="hl-4">a</span><span class="hl-2"> </span><span class="hl-4">config</span><span class="hl-2"> </span><span class="hl-4">file</span><span class="hl-2"> </span><span class="hl-4">must</span><span class="hl-2"> </span><span class="hl-4">be</span><span class="hl-2"> </span><span class="hl-4">provided</span><span class="hl-2"> </span><span class="hl-4">which</span><span class="hl-2"> </span><span class="hl-4">should</span><span class="hl-2"> </span><span class="hl-4">assign</span><span class="hl-2"> </span><span class="hl-4">a</span><br/><span class="hl-2"> </span><span class="hl-6">function</span><span class="hl-2"> </span><span class="hl-5">to</span><span class="hl-2"> `</span><span class="hl-5">module</span><span class="hl-2">.</span><span class="hl-5">exports</span><span class="hl-2">` </span><span class="hl-5">that</span><span class="hl-2"> </span><span class="hl-5">will</span><span class="hl-2"> </span><span class="hl-5">be</span><span class="hl-2"> </span><span class="hl-5">passed</span><span class="hl-2"> </span><span class="hl-5">the</span><span class="hl-2"> </span><span class="hl-5">frame</span><span class="hl-2">-</span><span class="hl-5">router</span><span class="hl-2"> </span><span class="hl-5">element</span><br/><span class="hl-2"> </span><span class="hl-5">as</span><span class="hl-2"> </span><span class="hl-5">an</span><span class="hl-2"> </span><span class="hl-5">input</span><span class="hl-2"> </span><span class="hl-5">once</span><span class="hl-2"> </span><span class="hl-5">it</span><span class="hl-2"> </span><span class="hl-5">has</span><span class="hl-2"> </span><span class="hl-5">been</span><span class="hl-2"> </span><span class="hl-5">mounted</span><span class="hl-2">. </span><span class="hl-5">The</span><span class="hl-2"> </span><span class="hl-5">function</span><span class="hl-2"> </span><span class="hl-5">should</span><span class="hl-2"> </span><span class="hl-5">return</span><span class="hl-2"> </span><span class="hl-5">a</span><span class="hl-2"> </span><span class="hl-5">config</span><br/><span class="hl-2"> </span><span class="hl-5">object</span><span class="hl-2"> </span><span class="hl-5">with</span><span class="hl-2"> </span><span class="hl-5">the</span><span class="hl-2"> </span><span class="hl-5">following</span><span class="hl-2"> </span><span class="hl-5">fields</span><span class="hl-2">:</span><br/><br/><span class="hl-2"> - </span><span class="hl-5">publishTopics</span><span class="hl-2">: </span><span class="hl-5">A</span><span class="hl-2"> </span><span class="hl-5">list</span><span class="hl-2"> </span><span class="hl-5">of</span><span class="hl-2"> </span><span class="hl-5">messaging</span><span class="hl-2"> </span><span class="hl-5">topics</span><span class="hl-2"> </span><span class="hl-5">the</span><span class="hl-2"> </span><span class="hl-5">client</span><span class="hl-2"> </span><span class="hl-5">publishes</span><span class="hl-2"> </span><span class="hl-5">on</span><br/><br/><span class="hl-2"> </span><span class="hl-5">Keep</span><span class="hl-2"> </span><span class="hl-5">in</span><span class="hl-2"> </span><span class="hl-5">mind</span><span class="hl-2"> </span><span class="hl-5">that</span><span class="hl-2"> </span><span class="hl-5">the</span><span class="hl-2"> </span><span class="hl-5">config</span><span class="hl-2"> </span><span class="hl-5">file</span><span class="hl-2"> </span><span class="hl-5">is</span><span class="hl-2"> </span><span class="hl-5">not</span><span class="hl-2"> </span><span class="hl-5">a</span><span class="hl-2"> </span><span class="hl-5">true</span><span class="hl-2"> </span><span class="hl-5">commonJS</span><span class="hl-2"> </span><span class="hl-5">module</span><span class="hl-2">, </span><span class="hl-5">and</span><br/><span class="hl-2"> </span><span class="hl-5">will</span><span class="hl-2"> </span><span class="hl-5">be</span><span class="hl-2"> </span><span class="hl-5">evaluated</span><span class="hl-2"> </span><span class="hl-5">directly</span><span class="hl-2"> </span><span class="hl-5">inside</span><span class="hl-2"> </span><span class="hl-5">the</span><span class="hl-2"> </span><span class="hl-5">browser</span><span class="hl-2"> </span><span class="hl-5">in</span><span class="hl-2"> </span><span class="hl-5">an</span><span class="hl-2"> </span><span class="hl-5">immediately</span><span class="hl-2"> </span><span class="hl-5">invoked</span><br/><span class="hl-2"> </span><span class="hl-6">function</span><span class="hl-2"> </span><span class="hl-5">expression</span><span class="hl-2">.</span>
|
|
23
183
|
</code><button>Copy</button></pre>
|
|
24
184
|
|
|
25
|
-
<p>
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
<
|
|
29
|
-
|
|
185
|
+
<p>
|
|
186
|
+
The CLI host app also provides a proxy config file that can be used
|
|
187
|
+
if you need the client and host applications on the same domain.
|
|
188
|
+
(See <code>app2</code> in the config below for an example).
|
|
189
|
+
</p>
|
|
190
|
+
<p><code>ifc-cli-config.js</code></p>
|
|
191
|
+
<pre><code class="json"><span class="hl-2">module.exports = function(frameRouter) {</span><br/><span class="hl-2"> </span><span class="hl-13">frameRouter.clientConfig</span><span class="hl-2"> </span><span class="hl-13">=</span><span class="hl-2"> </span><span class="hl-13">{</span><br/><span class="hl-2"> </span><span class="hl-13">clients</span><span class="hl-2">: {</span><br/><span class="hl-2"> </span><span class="hl-13">app1</span><span class="hl-2">: {</span><br/><span class="hl-2"> </span><span class="hl-13">url</span><span class="hl-2">: </span><span class="hl-13">'/client-app</span><span class="hl-12">-1</span><span class="hl-13">/#/'</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-13">assignedRoute</span><span class="hl-2">: </span><span class="hl-13">'/app</span><span class="hl-12">1</span><span class="hl-13">'</span><br/><span class="hl-2"> },</span><br/><span class="hl-2"> </span><span class="hl-13">app2</span><span class="hl-2">: {</span><br/><span class="hl-2"> </span><span class="hl-13">url</span><span class="hl-2">: </span><span class="hl-13">'/client-app</span><span class="hl-12">-2</span><span class="hl-13">/#/'</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-13">assignedRoute</span><span class="hl-2">: </span><span class="hl-13">'/app</span><span class="hl-12">2</span><span class="hl-13">'</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-13">sandbox</span><span class="hl-2">: </span><span class="hl-13">'allow-presentation'</span><span class="hl-2">, </span><span class="hl-0">// optional</span><br/><span class="hl-2"> </span><span class="hl-13">allow</span><span class="hl-2">: </span><span class="hl-13">'microphone</span><span class="hl-2"> </span><span class="hl-13">http:</span><span class="hl-0">//localhost:8080;' // optional</span><br/><span class="hl-2"> }</span><br/><span class="hl-2"> },</span><br/><span class="hl-2"> </span><span class="hl-13">envData</span><span class="hl-2">: {</span><br/><span class="hl-2"> </span><span class="hl-13">locale</span><span class="hl-2">: </span><span class="hl-13">'en-US'</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-13">hostRootUrl</span><span class="hl-2">:</span><br/><span class="hl-2"> </span><span class="hl-13">window.location.origin</span><span class="hl-2"> </span><span class="hl-13">+</span><br/><span class="hl-2"> </span><span class="hl-13">window.location.pathname</span><span class="hl-2"> </span><span class="hl-13">+</span><br/><span class="hl-2"> </span><span class="hl-13">window.location.search</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-13">custom</span><span class="hl-2">: </span><span class="hl-13">getCustomClientData()</span><br/><span class="hl-2"> }</span><br/><span class="hl-2"> };</span><br/><br/><span class="hl-2"> return {</span><br/><span class="hl-2"> </span><span class="hl-0">// These are the topics that the host app should display payloads for when</span><br/><span class="hl-2"> </span><span class="hl-0">// the client publishes on them.</span><br/><span class="hl-2"> </span><span class="hl-13">publishTopics</span><span class="hl-2">: [</span><span class="hl-13">'publish.topic'</span><span class="hl-2">]</span><br/><span class="hl-2"> };</span><br/><span class="hl-2">};</span><br/><br/><span class="hl-2">function getCustomClientData() {</span><br/><span class="hl-2"> </span><span class="hl-13">return</span><span class="hl-2"> </span><span class="hl-13">{</span><span class="hl-2"> </span><span class="hl-13">test</span><span class="hl-2">: </span><span class="hl-13">'This</span><span class="hl-2"> </span><span class="hl-13">is</span><span class="hl-2"> </span><span class="hl-13">only</span><span class="hl-2"> </span><span class="hl-13">a</span><span class="hl-2"> </span><span class="hl-13">test'</span><span class="hl-2"> };</span><br/><span class="hl-2">}</span>
|
|
30
192
|
</code><button type="button">Copy</button></pre>
|
|
31
193
|
|
|
32
|
-
<p><code>ifc-proxy.config.json</code></p>
|
|
33
|
-
<pre><code class="json"><span class="hl-2">{</span><br/><span class="hl-2"> </span><span class="hl-14">"static"</span><span class="hl-2">: {</span><br/><span class="hl-2"> </span><span class="hl-0">// Instead of directly referencing client 2 via "url: `http://${hostname}:8080/client-app-2/#/`"</span><br/><span class="hl-2"> </span><span class="hl-0">// we create a static directory for the second client.</span><br/><span class="hl-2"> </span><span class="hl-14">"/client-app-2"</span><span class="hl-2">: </span><span class="hl-3">"http://${hostname}:8080"</span><br/><span class="hl-2"> },</span><br/><span class="hl-2"> </span><span class="hl-0">// This file also has support for basic proxy configurations</span><br/><span class="hl-2"> </span><span class="hl-14">"proxies"</span><span class="hl-2">: {</span><br/><span class="hl-2"> </span><span class="hl-14">"something"</span><span class="hl-2">: {</span><br/><span class="hl-2"> </span><span class="hl-13">path</span><span class="hl-2">: </span><span class="hl-3">"/something"</span><br/><span class="hl-2"> </span><span class="hl-13">target:</span><span class="hl-2"> </span><span class="hl-3">"http://www.example.org/something"</span><br/><span class="hl-2"> }</span><br/><span class="hl-2"> }</span><br/><span class="hl-2">}</span>
|
|
194
|
+
<p><code>ifc-proxy.config.json</code></p>
|
|
195
|
+
<pre><code class="json"><span class="hl-2">{</span><br/><span class="hl-2"> </span><span class="hl-14">"static"</span><span class="hl-2">: {</span><br/><span class="hl-2"> </span><span class="hl-0">// Instead of directly referencing client 2 via "url: `http://${hostname}:8080/client-app-2/#/`"</span><br/><span class="hl-2"> </span><span class="hl-0">// we create a static directory for the second client.</span><br/><span class="hl-2"> </span><span class="hl-14">"/client-app-2"</span><span class="hl-2">: </span><span class="hl-3">"http://${hostname}:8080"</span><br/><span class="hl-2"> },</span><br/><span class="hl-2"> </span><span class="hl-0">// This file also has support for basic proxy configurations</span><br/><span class="hl-2"> </span><span class="hl-14">"proxies"</span><span class="hl-2">: {</span><br/><span class="hl-2"> </span><span class="hl-14">"something"</span><span class="hl-2">: {</span><br/><span class="hl-2"> </span><span class="hl-13">path</span><span class="hl-2">: </span><span class="hl-3">"/something"</span><br/><span class="hl-2"> </span><span class="hl-13">target:</span><span class="hl-2"> </span><span class="hl-3">"http://www.example.org/something"</span><br/><span class="hl-2"> }</span><br/><span class="hl-2"> }</span><br/><span class="hl-2">}</span>
|
|
34
196
|
</code><button type="button">Copy</button></pre>
|
|
35
197
|
|
|
36
|
-
<h3 id="development" class="tsd-anchor-link">
|
|
37
|
-
<
|
|
38
|
-
|
|
198
|
+
<h3 id="development" class="tsd-anchor-link">
|
|
199
|
+
Development<a
|
|
200
|
+
href="#development"
|
|
201
|
+
aria-label="Permalink"
|
|
202
|
+
class="tsd-anchor-icon"
|
|
203
|
+
><svg viewBox="0 0 24 24" aria-hidden="true">
|
|
204
|
+
<use href="assets/icons.svg#icon-anchor"></use></svg
|
|
205
|
+
></a>
|
|
206
|
+
</h3>
|
|
207
|
+
<h4 id="installation" class="tsd-anchor-link">
|
|
208
|
+
Installation<a
|
|
209
|
+
href="#installation"
|
|
210
|
+
aria-label="Permalink"
|
|
211
|
+
class="tsd-anchor-icon"
|
|
212
|
+
><svg viewBox="0 0 24 24" aria-hidden="true">
|
|
213
|
+
<use href="assets/icons.svg#icon-anchor"></use></svg
|
|
214
|
+
></a>
|
|
215
|
+
</h4>
|
|
216
|
+
<p>
|
|
217
|
+
Before you can build this you will need to make sure that you are
|
|
218
|
+
using the LTS version of nodejs. Then you can run the following
|
|
219
|
+
command <code>npm ci</code>
|
|
220
|
+
</p>
|
|
221
|
+
<h4 id="building-the-library" class="tsd-anchor-link">
|
|
222
|
+
Building the Library<a
|
|
223
|
+
href="#building-the-library"
|
|
224
|
+
aria-label="Permalink"
|
|
225
|
+
class="tsd-anchor-icon"
|
|
226
|
+
><svg viewBox="0 0 24 24" aria-hidden="true">
|
|
227
|
+
<use href="assets/icons.svg#icon-anchor"></use></svg
|
|
228
|
+
></a>
|
|
229
|
+
</h4>
|
|
230
|
+
<p>
|
|
231
|
+
To run the build you can use the following command
|
|
232
|
+
<code>npm run build</code>
|
|
233
|
+
</p>
|
|
234
|
+
<h4 id="testing" class="tsd-anchor-link">
|
|
235
|
+
Testing<a
|
|
236
|
+
href="#testing"
|
|
237
|
+
aria-label="Permalink"
|
|
238
|
+
class="tsd-anchor-icon"
|
|
239
|
+
><svg viewBox="0 0 24 24" aria-hidden="true">
|
|
240
|
+
<use href="assets/icons.svg#icon-anchor"></use></svg
|
|
241
|
+
></a>
|
|
242
|
+
</h4>
|
|
243
|
+
<pre><code><span class="hl-4">npm</span><span class="hl-2"> </span><span class="hl-4">run</span><span class="hl-2"> </span><span class="hl-4">test</span><span class="hl-2"> # </span><span class="hl-4">single</span><span class="hl-2"> </span><span class="hl-4">run</span><span class="hl-2"> </span><span class="hl-6">of</span><span class="hl-2"> </span><span class="hl-4">tests</span><br/><span class="hl-4">npm</span><span class="hl-2"> </span><span class="hl-4">run</span><span class="hl-2"> </span><span class="hl-4">test</span><span class="hl-2">.</span><span class="hl-4">watch</span><span class="hl-2"> # </span><span class="hl-4">continuous</span><span class="hl-2"> </span><span class="hl-4">run</span><span class="hl-2"> </span><span class="hl-6">of</span><span class="hl-2"> </span><span class="hl-4">tests</span><br/><span class="hl-4">npm</span><span class="hl-2"> </span><span class="hl-4">run</span><span class="hl-2"> </span><span class="hl-4">test</span><span class="hl-2">.</span><span class="hl-4">watch</span><span class="hl-2">.</span><span class="hl-4">chrome</span><span class="hl-2"> # </span><span class="hl-4">continuous</span><span class="hl-2"> </span><span class="hl-4">run</span><span class="hl-2"> </span><span class="hl-6">of</span><span class="hl-2"> </span><span class="hl-4">tests</span><span class="hl-2"> </span><span class="hl-6">in</span><span class="hl-2"> </span><span class="hl-4">a</span><span class="hl-2"> </span><span class="hl-4">chromium</span><span class="hl-2"> </span><span class="hl-4">browser</span><span class="hl-2">.</span>
|
|
39
244
|
</code><button>Copy</button></pre>
|
|
40
245
|
|
|
41
|
-
<h4 id="running-the-example-app" class="tsd-anchor-link">
|
|
42
|
-
|
|
43
|
-
|
|
246
|
+
<h4 id="running-the-example-app" class="tsd-anchor-link">
|
|
247
|
+
Running the Example App<a
|
|
248
|
+
href="#running-the-example-app"
|
|
249
|
+
aria-label="Permalink"
|
|
250
|
+
class="tsd-anchor-icon"
|
|
251
|
+
><svg viewBox="0 0 24 24" aria-hidden="true">
|
|
252
|
+
<use href="assets/icons.svg#icon-anchor"></use></svg
|
|
253
|
+
></a>
|
|
254
|
+
</h4>
|
|
255
|
+
<p>
|
|
256
|
+
To see an example of this in action you can run the following
|
|
257
|
+
command <code>npm run start-client-example</code> and navigate to
|
|
258
|
+
<a href="http://localhost:3000">http://localhost:3000</a> on your
|
|
259
|
+
machine.
|
|
260
|
+
</p>
|
|
261
|
+
<h3 id="ie11-support" class="tsd-anchor-link">
|
|
262
|
+
IE11 support<a
|
|
263
|
+
href="#ie11-support"
|
|
264
|
+
aria-label="Permalink"
|
|
265
|
+
class="tsd-anchor-icon"
|
|
266
|
+
><svg viewBox="0 0 24 24" aria-hidden="true">
|
|
267
|
+
<use href="assets/icons.svg#icon-anchor"></use></svg
|
|
268
|
+
></a>
|
|
269
|
+
</h3>
|
|
270
|
+
<p>
|
|
271
|
+
Our target version of javascript is ES2015. This means that you will
|
|
272
|
+
be required to transpile this library if you wish to support IE11.
|
|
273
|
+
In addition the necessary polyfills will need to be loaded by both
|
|
274
|
+
the host application and the client frame.
|
|
275
|
+
</p>
|
|
276
|
+
</div>
|
|
277
|
+
</div>
|
|
278
|
+
<div class="col-sidebar">
|
|
279
|
+
<div class="page-menu">
|
|
280
|
+
<div class="tsd-navigation settings">
|
|
281
|
+
<details class="tsd-accordion">
|
|
282
|
+
<summary class="tsd-accordion-summary">
|
|
283
|
+
<svg
|
|
284
|
+
width="20"
|
|
285
|
+
height="20"
|
|
286
|
+
viewBox="0 0 24 24"
|
|
287
|
+
fill="none"
|
|
288
|
+
aria-hidden="true"
|
|
289
|
+
>
|
|
290
|
+
<use href="assets/icons.svg#icon-chevronDown"></use>
|
|
291
|
+
</svg>
|
|
292
|
+
<h3>Settings</h3>
|
|
293
|
+
</summary>
|
|
294
|
+
<div class="tsd-accordion-details">
|
|
295
|
+
<div class="tsd-filter-visibility">
|
|
296
|
+
<span class="settings-label">Member Visibility</span>
|
|
297
|
+
<ul id="tsd-filter-options">
|
|
298
|
+
<li class="tsd-filter-item">
|
|
299
|
+
<label class="tsd-filter-input"
|
|
300
|
+
><input
|
|
301
|
+
type="checkbox"
|
|
302
|
+
id="tsd-filter-inherited"
|
|
303
|
+
name="inherited"
|
|
304
|
+
checked
|
|
305
|
+
/><svg
|
|
306
|
+
width="32"
|
|
307
|
+
height="32"
|
|
308
|
+
viewBox="0 0 32 32"
|
|
309
|
+
aria-hidden="true"
|
|
310
|
+
>
|
|
311
|
+
<rect
|
|
312
|
+
class="tsd-checkbox-background"
|
|
313
|
+
width="30"
|
|
314
|
+
height="30"
|
|
315
|
+
x="1"
|
|
316
|
+
y="1"
|
|
317
|
+
rx="6"
|
|
318
|
+
fill="none"
|
|
319
|
+
></rect>
|
|
320
|
+
<path
|
|
321
|
+
class="tsd-checkbox-checkmark"
|
|
322
|
+
d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
|
|
323
|
+
stroke="none"
|
|
324
|
+
stroke-width="3.5"
|
|
325
|
+
stroke-linejoin="round"
|
|
326
|
+
fill="none"
|
|
327
|
+
></path></svg
|
|
328
|
+
><span>Inherited</span></label
|
|
329
|
+
>
|
|
330
|
+
</li>
|
|
331
|
+
</ul>
|
|
332
|
+
</div>
|
|
333
|
+
<div class="tsd-theme-toggle">
|
|
334
|
+
<label class="settings-label" for="tsd-theme">Theme</label
|
|
335
|
+
><select id="tsd-theme">
|
|
336
|
+
<option value="os">OS</option>
|
|
337
|
+
<option value="light">Light</option>
|
|
338
|
+
<option value="dark">Dark</option>
|
|
339
|
+
</select>
|
|
340
|
+
</div>
|
|
341
|
+
</div>
|
|
342
|
+
</details>
|
|
343
|
+
</div>
|
|
344
|
+
<details open class="tsd-accordion tsd-page-navigation">
|
|
345
|
+
<summary class="tsd-accordion-summary">
|
|
346
|
+
<svg
|
|
347
|
+
width="20"
|
|
348
|
+
height="20"
|
|
349
|
+
viewBox="0 0 24 24"
|
|
350
|
+
fill="none"
|
|
351
|
+
aria-hidden="true"
|
|
352
|
+
>
|
|
353
|
+
<use href="assets/icons.svg#icon-chevronDown"></use>
|
|
354
|
+
</svg>
|
|
355
|
+
<h3>On This Page</h3>
|
|
356
|
+
</summary>
|
|
357
|
+
<div class="tsd-accordion-details">
|
|
358
|
+
<a href="#iframe-coordinator"
|
|
359
|
+
><span>iframe-<wbr />coordinator</span></a
|
|
360
|
+
>
|
|
361
|
+
<ul>
|
|
362
|
+
<li>
|
|
363
|
+
<a href="#why-would-i-want-to-do-that"
|
|
364
|
+
><span>Why would <wbr />I want to do that?</span></a
|
|
365
|
+
>
|
|
366
|
+
</li>
|
|
367
|
+
<li>
|
|
368
|
+
<a href="#how-do-i-use-it"
|
|
369
|
+
><span>How do <wbr />I use it?</span></a
|
|
370
|
+
>
|
|
371
|
+
</li>
|
|
372
|
+
<li>
|
|
373
|
+
<ul>
|
|
374
|
+
<li>
|
|
375
|
+
<a href="#host-application-example"
|
|
376
|
+
><span>Host <wbr />Application <wbr />Example</span></a
|
|
377
|
+
>
|
|
378
|
+
</li>
|
|
379
|
+
<li>
|
|
380
|
+
<a href="#client-application-setup"
|
|
381
|
+
><span>Client <wbr />Application <wbr />Setup</span></a
|
|
382
|
+
>
|
|
383
|
+
</li>
|
|
384
|
+
<li>
|
|
385
|
+
<a href="#local-client-application-development"
|
|
386
|
+
><span
|
|
387
|
+
>Local <wbr />Client <wbr />Application
|
|
388
|
+
<wbr />Development</span
|
|
389
|
+
></a
|
|
390
|
+
>
|
|
391
|
+
</li>
|
|
392
|
+
<li>
|
|
393
|
+
<a href="#development"><span>Development</span></a>
|
|
394
|
+
</li>
|
|
395
|
+
<li>
|
|
396
|
+
<ul>
|
|
397
|
+
<li>
|
|
398
|
+
<a href="#installation"><span>Installation</span></a>
|
|
399
|
+
</li>
|
|
400
|
+
<li>
|
|
401
|
+
<a href="#building-the-library"
|
|
402
|
+
><span>Building the <wbr />Library</span></a
|
|
403
|
+
>
|
|
404
|
+
</li>
|
|
405
|
+
<li>
|
|
406
|
+
<a href="#testing"><span>Testing</span></a>
|
|
407
|
+
</li>
|
|
408
|
+
<li>
|
|
409
|
+
<a href="#running-the-example-app"
|
|
410
|
+
><span
|
|
411
|
+
>Running the <wbr />Example <wbr />App</span
|
|
412
|
+
></a
|
|
413
|
+
>
|
|
414
|
+
</li>
|
|
415
|
+
</ul>
|
|
416
|
+
</li>
|
|
417
|
+
<li>
|
|
418
|
+
<a href="#ie11-support"><span>IE11 support</span></a>
|
|
419
|
+
</li>
|
|
420
|
+
</ul>
|
|
421
|
+
</li>
|
|
422
|
+
</ul>
|
|
423
|
+
</div>
|
|
424
|
+
</details>
|
|
425
|
+
</div>
|
|
426
|
+
<div class="site-menu">
|
|
427
|
+
<nav class="tsd-navigation">
|
|
428
|
+
<a href="modules.html">iframe-coordinator - v6.5.1</a>
|
|
429
|
+
<ul class="tsd-small-nested-navigation" id="tsd-nav-container">
|
|
430
|
+
<li>Loading...</li>
|
|
431
|
+
</ul>
|
|
432
|
+
</nav>
|
|
433
|
+
</div>
|
|
434
|
+
</div>
|
|
435
|
+
</div>
|
|
436
|
+
<footer>
|
|
437
|
+
<p class="tsd-generator">
|
|
438
|
+
Generated using
|
|
439
|
+
<a href="https://typedoc.org/" target="_blank">TypeDoc</a>
|
|
440
|
+
</p>
|
|
441
|
+
</footer>
|
|
442
|
+
<div class="overlay"></div>
|
|
443
|
+
</body>
|
|
444
|
+
</html>
|