Von Version 11.8
bearbeitet von gru
am 02.03.2023, 09:15
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 11.12
bearbeitet von gru
am 02.03.2023, 09:22
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Inhalt
... ... @@ -1,3 +1,47 @@
1 +{{html clean="false"}}
2 + <style type="text/css">
3 + pre{
4 + margin:0;
5 + }
6 +
7 + .xm-form{
8 + margin:0 auto;
9 + }
10 +
11 + .extra .hljs-string{
12 + font-weight:bold;
13 + color:red;
14 + }
15 +
16 + iframe, .hljs{
17 + max-width:700px;
18 + border:2px solid #515151;
19 + }
20 +
21 + .hljs{
22 + max-width:985px;
23 + text-align:center;
24 + }
25 +
26 + .resizer {
27 + display:flex;
28 + margin:0;
29 + padding:0;
30 + resize:both;
31 + overflow:hidden
32 + }
33 +
34 + .resizer > .resized {
35 + flex-grow:1;
36 + margin:0;
37 + padding:0;
38 + border:0;
39 + height: inherit;
40 + }
41 + .border { border:4px dashed black; }
42 + </style>
43 +{{/html}}
44 +
1 1  == 1. Externen Kontext via iFrame einbinden z.B. ==
2 2  
3 3  [[https://pro.form.cloud/formcycle/external/forms/main.xhtml]]
... ... @@ -6,19 +6,18 @@
6 6  
7 7  == 2. Eventlistener für Formularauswahl registrieren z.B.: ==
8 8  
9 -
10 -
11 -
12 -{{code language="javascript"}}function myFormCycleCallback(msg){
13 - $('#result').html('Nachricht von: "<b>' + msg.origin + '</b>" Formular mit id: "<b>' + msg.data + '</b>" wurde ausgewählt.' );
14 - renderForm(msg.data);
53 +{{code language="javascript"}}
54 +function myFormCycleCallback(msg){
55 + $('#result').html('Nachricht von: "<b>' + msg.origin + '</b>" Formular mit id: "<b>' + msg.data + '</b>" wurde ausgewählt.' );
56 + renderForm(msg.data);
15 15  }
16 16  
17 -window.addEventListener("message", myFormCycleCallback, false);{{/code}}
59 +window.addEventListener("message", myFormCycleCallback, false);
60 +{{/code}}
18 18  
19 -
20 20  == 3. Ergebenis speichern: ==
21 21  
64 +TODO: Iframe
22 22  {{html clean="false"}}
23 23   <div class="hljs" id="result"></div>
24 24  {{/html}}
... ... @@ -28,8 +28,8 @@
28 28  
29 29  {{code language="js"}}
30 30  window.renderForm = function(formId){
31 - var myBase = 'https://help6.formcycle.eu/xwiki/bin/edit/Examples/IncludeFormViaExternalContext/';
32 - var fcBase = 'https://pro.formcloud.de/formcycle';
74 + var myBase = 'https://help7.formcycle.eu/xwiki/bin/view/Examples/IncludeExternalContext/';
75 + var fcBase = 'https://pro.form.cloud/formcycle';
33 33   var myFormContainer = $('#content');
34 34  
35 35   var form = $.ajax({
... ... @@ -63,7 +63,9 @@
63 63  == 5. Ergebenis Formular: ==
64 64  
65 65  {{html clean="false"}}
66 - <div class="hljs" id="content"></div>
109 + <div class="resizer border" style="height: 1000px;">
110 + <iframe id="content" class="resized" src="https://help7.formcycle.eu/xwiki/bin/download/Examples/IncludeAJAX/iframe.html"></iframe>
111 + </div>
67 67  {{/html}}
68 68  
69 69  
... ... @@ -70,54 +70,6 @@
70 70  
71 71  
72 72  
118 +Hinweis: Aus Kompatibilitätsgründen wird der Inhalt auf dieser Seite in einem iframe dargestellt.
73 73  
74 74  
75 -Für das folgenden Beispiel wird zu Demonstrationszwecken eine eigene [[HTML-Seite>>attach:iframe.html]] in einem iframe dargestellt:
76 -
77 -{{html clean="false"}}
78 - <style type="text/css">
79 - pre{
80 - margin:0;
81 - }
82 -
83 - .xm-form{
84 - margin:0 auto;
85 - }
86 -
87 - .extra .hljs-string{
88 - font-weight:bold;
89 - color:red;
90 - }
91 -
92 - iframe, .hljs{
93 - max-width:700px;
94 - border:2px solid #515151;
95 - }
96 -
97 - .hljs{
98 - max-width:985px;
99 - text-align:center;
100 - }
101 -
102 - .resizer {
103 - display:flex;
104 - margin:0;
105 - padding:0;
106 - resize:both;
107 - overflow:hidden
108 - }
109 -
110 - .resizer > .resized {
111 - flex-grow:1;
112 - margin:0;
113 - padding:0;
114 - border:0;
115 - height: inherit;
116 - }
117 - .border { border:4px dashed black; }
118 - </style>
119 -
120 - <div class="resizer border" style="height: 1000px;">
121 - <iframe id="customerdemo" class="resized" src="https://help7.formcycle.eu/xwiki/bin/download/Examples/IncludeAJAX/iframe.html"></iframe>
122 - </div>
123 -{{/html}}