Forum - Cookie-Hinweis für iFrames für Short Youtube Kurz-Videos - Ladeskript und Verbindungsgeschwindigkeit?

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps � Cookie-Hinweis für iFrames für Short Youtube Kurz-Videos - Ladeskript und Verbindungsgeschwindigkeit?

Seite 1 von 2 � Seite 1 2 Seite �

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 10, 8.1, 8 und 7 - Fragen & Antworten �rger mit Ihrem PC? �rger mit dem PC - Vorbeugung und Hilfe �rger mit dem PC - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | Cookie-Hinweis für iFrames für Short Youtube Kurz-Videos - Ladeskript und Verbindungsgeschwindigkeit? datum

28.08.2023 09:53 (zuletzt bearbeitet: 10.12.2023 05:16)

Daishi

Informationen anzeigen

Beitr�ge:	337
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	291

Ich wollte nur einen einfachen iFrame für mich, für mein Forum basteln, soweit so gut.

Bin einer Anleitung für das JavaScript gefolgt, soweit so gut. Ich fand, auch per Zufall heraus das da auch CSS Codes im Javascript gehen. Gesagt getan, habe seit gestern Abend bis jetzt am Script gesessen .

Mit den anderen Script gibt es zum Glück keinen Ärger, nur mit einem, und zwar mit dem Seitenlader Script. Wieviel Sekunden es dauert die Seite zu laden, funktioniert nicht.

Da ich ja Videos von meiner Arbeit auf YouTube hochlade, muss ich das schreiben, dass das ein Drittanbieter ist, und die Daten dort gesammelt werden.

Um den ganzen juristischen Ärger zu umgehen, habe ich mich hingesetzt und das iFrame gebastelt.

Hier mal das Bild, wie es aussieht:

Hier mal der Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
<style>
 iframe {
  display: block;
  margin: 1em auto;
} 
</style>
 
<span class="convert_youtube"><iframe allowfullscreen width="360px" height="450px" style="padding: 12px 6px; border: 1px groove rgb(86, 86, 86); border-radius: 4px; box-shadow: rgb(92, 92, 92) 3px 3px 3px;" frameborder="0" data-src="https://www.youtube.com/embed/ZNeLNg50J-U"></iframe></span><br>
 
<script>
window.onload = () => {
  const getHostname = url => {
    const a = document.createElement('a')
    a.href = url
    return a.hostname
  }
  const fr = document.getElementsByTagName('iframe')
  
  for (let i = 0; i < fr.length; i++) {
    const frame = fr[i]
    const frWindow = fr[i].contentWindow
    const frDocument = frWindow.document
    const url = frame.getAttribute('data-src')
    const body = frDocument.body
 
    const blur = frDocument.createElement('div')
    blur.style = `
      background: url(${frame.getAttribute('data-thumb') || '#' + (frame.getAttribute('width') || frame.getAttribute('height'))}) center center no-repeat;
      background-size: cover;
      filter: blur(3px);
      position: absolute;
      top: 0; bottom: 0; left: 0; right: 0;
    `
    const noticeWrapper = frDocument.createElement('div')
    noticeWrapper.style = `
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6-15 */
      border-radius: 2px;
      box-shadow: 0 0 5px rgba(0,0,0,.5);
      padding: .5em 1em;
      width: 80%; max-width: 760px;
    `
 
    const noticeHeader = frDocument.createElement('h1')
    noticeHeader.style = `font-size: 15px`
    noticeHeader.innerHTML = `
      Mit dem Ansehen des Videos von
      <i>${frame.getAttribute('data-service-provider-name') || getHostname(url)}</i> erklären Sie sich einverstanden, dass Ihre Daten an  <i>${frame.getAttribute('data-service-provider-name') || getHostname(url)}</i>  übertragen werden.
    `
 
    const noticeInfo = frDocument.createElement('p')
    noticeInfo.innerHTML = `
      Durch die Annahme greifen Sie auf einen Dienst zu, der von einem Drittanbieter extern 
      für <i>${window.location.hostname}</i> bereitgestellt wird. 
      <br />
      Wir von <i>${window.location.hostname}</i> distanzieren uns hiermit ausdrücklich von den Inhalten, die sich hinter den von <i>${frame.getAttribute('data-service-provider-name') || getHostname(url)}</i> (einschließlich deruntergeordneten Seiten) aufgeführten Links, den dahinterstehenden Servern, weiterführenden Links und sämtlichen anderen sichtbaren oder unsichtbaren Inhalten.
    `
    
        const noticeButton = frDocument.createElement('button')
    noticeButton.style = `
      display: block;
      float: right;
    `
    noticeButton.innerHTML = 'Ich habe verstanden und stimme zu'
    noticeButton.onclick = () => frame.setAttribute('src', url)
 
    const noticeSecondary = frDocument.createElement('a')
    noticeSecondary.style = `
      clear: right;
      display: block;
      float: right;
      font-size: .75em;
    `
    noticeSecondary.href = url
    noticeSecondary.target = '_blank'
    noticeSecondary.rel = 'noopener'
    noticeSecondary.innerHTML = 'direct link'
    
    noticeWrapper.appendChild(noticeHeader)
    noticeWrapper.appendChild(noticeInfo)
    noticeWrapper.appendChild(noticeButton)
    noticeWrapper.appendChild(noticeSecondary)
    
    body.style = `font-family: Lato, sans-serif`
    body.appendChild(blur)
    body.appendChild(noticeWrapper)
 
  }
}  
</script>
 

Schlie�en

Jetzt nur eine Frage, wo habe ich hier einen Fehler eingegeben, weil er sich mit dem Ladescript streitet.

Ich bin in dieser Materie mit Javascript noch Anfänger, und ich gebe mein Bestes.

Für Tipps, Hilfe, Vorschläge bin ich gerne offen, es war eine Inspiration, und Idee.

Mit netten Grüßen

Daishi

Daishi

Antworten

#2 | Fehlersuche: Habe hier beim iFrame etwas festgestellt datum

29.08.2023 12:57 (zuletzt bearbeitet: 30.08.2023 07:57)

Daishi

Informationen anzeigen

Beitr�ge:	337
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	291

Hallo, Wolfgang, mir ist etwas aufgefallen, ich habe 2 Scripte selbst geschrieben einmal, Deine Information + iFrame

Deine Information:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<style>
  
  {
  background-color: black;
  padding: 10px;
}
 
#Deine_info {
  color: black;
  font-size: 20px;
  white-space: pre-wrap;
  font-family: monospace;
}
#Deine_info tr td {
  padding-top: 20px;
}
#Deine_info tr td:nth-child(1) {
  font-weight: bold;
  text-align: right;
  padding-right: 15px;
}
#Deine_info tr td:nth-child(2) {
  color: #2cdf63;
} 
  
</style>
 
<table id="Deine_info"></table>
 

<script id="rendered-js">
window.onload = () => {
  const info = document.getElementById('Deine_info');
  const stats = {
    Breite: screen.width,
    Höhe: screen.height,
    "innere Breite": window.innerWidth,
    "innere Höhe": window.innerHeight,
    Verhältnis: window.devicePixelRatio,
    "User-Agent": window.navigator.userAgent };
 
  const content = Object.keys(stats).map(k => {
    return `<tr>
            <td>${k}:</td>
            <td>${stats[k]}</td>
        </tr>`;
  }).join('\n');
  info.innerHTML = content;
};
//# sourceURL=pen.js
    </script>
 

Schlie�en

iFrame:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
 
<center><p class="text-center">YouTube-Videos werden für Webseiten-Betreiber immer wichtiger, da der geschriebene Text für Personen visuell Strukturiert aufbereitet und somit eine breitere Zielgruppe angesprochen werden kann.<br>
<br>
Seit diesem Jahr sollten Entwickler dank der DSGVO einige Anpassungen an Ihrer Webseite vorgenommen haben, um nicht in die Abmahn-Falle zu gelangen. Ein großer Punkt ist die Integration von Google-Services die nur noch teilweise oder gar nicht mehr verwendet werden dürfen.<br>
<br>
Da YouTube zur Google-Familie gehört und dadurch Benutzer-Daten ungefragt an Europa-Fremde Server übertragen werden, sollten nur noch wenige Webseiten mit einer Video-Anbindung zum Streaming-Giganten existieren.<br>
<br>
Auch die sogenannte "Datenschutzkonforme" NoCookie-Implementierung ist kein Garant für eine DSGVO-Konforme Einbindung der Videos. Denn es werden weiterhin Daten des Benutzers übertragen. Bei diesem Verfahren wird lediglich die Verwendung von Cookies unterbunden.<br>
<br>  
Damit du trotzdem YouTube-Videos ausspielen darfst musst du die explizite Zustimmung der Datenübertragung vom Benutzer einholen.<br>
<br>
Das kann durch einen Klick auf eine Schaltfläche geschehen, die unter einem entsprechenden Hinweistext platziert wird. Zudem sollte ein Link zu Deiner Datenschutz-Seite platziert werden, der mit einem Klick in einem neuen Reiter geöffnet wird.</p></center>
 
<style>
  
 iframe {
  display: block;
  margin: 1em auto;
} 
 
</style>
 

 
 <span class="convert_youtube"><iframe allowfullscreen="" width="460px" height="498px" style="padding: 12px 6px; border: 1px groove rgb(86, 86, 86); border-radius: 4px; box-shadow: rgb(92, 92, 92) 3px 3px 3px;" frameborder="0" data-src="https://www.youtube.com/embed/ZNeLNg50J-U"></iframe></span><br>
 
<script>
  
 
window.onload = () => {
  const getHostname = url => {
    const a = document.createElement('a')
    a.href = url
    return a.hostname
  }
  const fr = document.getElementsByTagName('iframe')
  
  for (let i = 0; i < fr.length; i++) {
    const frame = fr[i]
    const frWindow = fr[i].contentWindow
    const frDocument = frWindow.document
    const url = frame.getAttribute('data-src')
    const body = frDocument.body
 
    const blur = frDocument.createElement('div')
    blur.style = `
      background: url(${frame.getAttribute('data-thumb') || '#' + (frame.getAttribute('width') || frame.getAttribute('height'))}) center center no-repeat;
      background-size: cover;
      filter: blur(3px);
      position: absolute;
      top: 0; bottom: 0; left: 0; right: 0;
    `
    const noticeWrapper = frDocument.createElement('div')
    noticeWrapper.style = `
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6-15 */
      border-radius: 2px;
      box-shadow: 0 0 5px rgba(0,0,0,.5);
      padding: .5em 1em;
      width: 80%; max-width: 760px;
    `
 
    const noticeHeader = frDocument.createElement('h1')
    noticeHeader.style = `font-size: 15px`
    noticeHeader.innerHTML = `
      Mit dem Ansehen des Videos von
      ${frame.getAttribute('data-service-provider-name') || getHostname(url)} Sie erklären  sich damit einverstanden, dass Ihre Daten an  ${frame.getAttribute('data-service-provider-name') || getHostname(url)}  übertragen werden.
    `
 
    const noticeInfo = frDocument.createElement('p')
    noticeInfo.innerHTML = `
      Durch die Annahme greifen Sie auf einen Dienst zu, der von einem Drittanbieter bereitgestellt wird
      extern zu ${window.location.hostname} Wir von ${window.location.hostname} distanzieren hiermit ausdrücklich von den Inhalten, die sich hinter den bei ${frame.getAttribute('data-service-provider-name') || getHostname(url)} (einschließlich der
untergeordneten Seiten) aufgeführten Links, den dahinter stehenden Servern, weiterführenden Links und sämtlichen anderen sichtbaren oder unsichtbaren Inhalten verbergen.<br>Hier sehen sie nochmal den <a href="https://www.servicecrewloreth.de/datenschutz.html"" target="_blank">Datenschutz</a> von ${window.location.hostname}
    `
    
        const noticeButton = frDocument.createElement('button')
    noticeButton.style = `
      display: block;
      float: right;
    `
    noticeButton.innerHTML = 'Ich habe verstanden und stimme zu'
    noticeButton.onclick = () => frame.setAttribute('src', url)
 
    const noticeSecondary = frDocument.createElement('a')
    noticeSecondary.style = `
      clear: right;
      display: block;
      float: right;
      font-size: .75em;
    `
    noticeSecondary.href = url
    noticeSecondary.target = '_blank'
    noticeSecondary.rel = 'noopener'
    noticeSecondary.innerHTML = ''
    
    noticeWrapper.appendChild(noticeHeader)
    noticeWrapper.appendChild(noticeInfo)
    noticeWrapper.appendChild(noticeButton)
    noticeWrapper.appendChild(noticeSecondary)
    
    body.style = `font-family: Lato, sans-serif`
    body.appendChild(blur)
    body.appendChild(noticeWrapper)
 
  }
}  
  
 
  
</script>
 

 

Schlie�en

Was mir aufgefallen ist das hier die Windowsbefehle gleich sind.

Deine Information:

1
 
document.getElementById

iFrame:

1
 
document.getElementsByTagName

Vielleicht liegt es daran dass es sich auch mit den Seiten Lade-Script nicht verträgt, auch Deine Information verträgt sich nicht mit dem iFrame. Das habe ich jetzt festgestellt, ich finde da im Moment keine Lösung wie ich das anders benennen kann oder umschreiben.

Bin hier noch reiner Anfänger in dem Javascript schreiben, wollte nur mal bescheidgeben, ob das, das Problem ist, dass sie sich nicht vertragen.

Ich hoffe, ich habe es verständlich genug erklärt, das ist mir aufgefallen.

Mit freundlichen Grüße

Daishi

Daishi

Antworten

#3 | Fehlersuche: Habe hier beim iFrame etwas festgestellt datum

30.08.2023 07:56

Fehlersuche: Habe hier beim iFrame etwas festgestellt

Hallo Daishi,
ich denke wir müssen uns nach einem anderen Skript umschauen, dass die Ladezeit einer Seite anzeigt.
Auch in der Vergangenheit hat das Lade-Skript nicht gut mit anderen Skripten zusammengearbeitet.
Ich habe noch keine vernünftige Lösung gefunden.
Auch das Umschreiben des Ladeskript brachte kein Erfolg!

Wolfgang

Antworten

#4 | RE: Fehlersuche: Habe hier beim iFrame etwas festgestellt datum

30.08.2023 11:25 (zuletzt bearbeitet: 02.09.2023 09:51)

Daishi

Informationen anzeigen

Beitr�ge:	337
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	291

Wolfgang, das bekommen wir bestimmt hin, etwas Neues zu erstellen, die Zeit drängt ja nicht. Ich halte mich daran, nicht alles unter Druck zu machen, sonst macht es ja keinen Spaß mehr und die Lust vergeht da so schnell.

Ich halte mich da an deine lieben Worte.

Ich habe an dem iFrame mal weitergearbeitet und etwas verbessert. Ich denke, dass es soweit gut ausschaut. Nur hapert es an meinen Deutschkenntnisse und Formulierungen.

Ich habe etwas festgestellt. Wir selbst im Forum haben ja keine Logfiles, das hat ja Xobor unser Provider, der uns ja die Foren zur Verfügung stellt. Ich habe unsere DSGVO nochmal durchgelesen, da steht ja beschrieben, dass wir sie speichern, dass ist dem ja nicht so.

Oder habe ich das falsch verstanden. Ich suchte nämlich im Admin Bereich nach Logfiles, konnte demnach nichts finden.

Habe mal mein iFrame jetzt angepasst und das dazugeschrieben.

Bild:

Also soweit macht das Script keine weiteren Aufstände mit den anderen Scripts, die ich installiert habe. Das Ladescript habe ich nicht installiert, lasse es erstmal weg, ist ja nicht so notwendig.

Ich hoffe, dass ich das auch mit der Distanzierung richtig ausgesprochen habe.

Wie gesagt, da ich selbst bei Xobor nichts gefunden habe, was iFrame für Business Template (v4) und v 6 angeht .

Deswegen dachte ich mir, ich schreibe mir eine selbst. Gesagt, getan.

Es war nur eine Inspiration und Idee.

Hier nochmal das Script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
 
<style>
  
  
  fieldset.ideen {
  border-top-left-radius: 10px;
  border-top-right-radius: 35px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 35px;
  border: Solid 2px #ffffff;
  padding: 0px 12px 7px 7px;
  color: #ffffff;
  background-color: transparent;
  font-size: 0.90rem;
  font-style: Oblique;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 25px;
  cursor: Default;
}
 
  @media (prefers-color-scheme: light)
body, article {
  color: #ffffff;
}
 
fieldset.ideen {
  color: #ffffff;
  font-size: 0.90rem;
  font-style: Oblique;
  cursor: Default;
}
 
legende {
  cursor: Default;
}
 
#idee::before {
  content: url("//files.homepagemodules.de/b906480/a_207_34c8a081.png");
  vertical-align: Middle;
}
 

.strong {
  font-weight: 500;
}
 
  iframe {
  display: block;
  margin: 1em auto;
}   
  
</style>
<fieldset class="ideen"><br>  <legend><span id="idee"><br></span></legend>   <br><br><strong>Datenerfassung auf diesem Forum
Cookies<br>
 
<br>
Server-Log-Dateien<br>
<br>
Der Provider Xobor von Service Crew Loreth Forum erhebt und speichert automatisch Informationen in so genannten Server-Log-Dateien,<br>
<br>  
die Ihr Browser automatisch an uns übermittelt.<br>
 <br> 
  Dies sind:<br>
 
    Browsertyp und Browserversion<br>
    verwendetes Betriebssystem<br>
    Referrer URL<br>
    Hostname des zugreifenden Rechners<br>
    Uhrzeit der Serveranfrage<br>
    IP-Adresse<br>
<br>
Eine Zusammenführung dieser Daten mit anderen Datenquellen wird nicht vorgenommen.<br>
<br>
Die Erfassung dieser Daten erfolgt auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO.<br>
<br>  
Der Forenbetreiber hat ein berechtigtes Interesse an der technisch fehlerfreien Darstellung und der Optimierung seinem Forum � hierzu müssen die Server-Log-Files erfasst werden.<br>
<br>  
  Diese Speichert  © 2023 Xobor |  <a href="https://www.xobor.de/Xobor-Forum-Software.html" "="" target="_blank">Forum-Software</a>
    </strong></fieldset><br><br> 
    
 <br> 
 <br>    
    
    
    <span class="convert_youtube"><iframe allowfullscreen="" width="460px" height="498px" style="padding: 12px 6px; border: 1px groove rgb(86, 86, 86); border-radius: 4px; box-shadow: rgb(92, 92, 92) 3px 3px 3px;" frameborder="0" data-src="https://www.youtube.com/embed/ZNeLNg50J-U"></iframe></span><br>
 
<script>
  
 
window.onload = () => {
  const getHostname = url => {
    const a = document.createElement('a')
    a.href = url
    return a.hostname
  }
  const fr = document.getElementsByTagName('iframe')
  
  for (let i = 0; i < fr.length; i++) {
    const frame = fr[i]
    const frWindow = fr[i].contentWindow
    const frDocument = frWindow.document
    const url = frame.getAttribute('data-src')
    const body = frDocument.body
 
    const blur = frDocument.createElement('div')
    blur.style = `
      background: url(${frame.getAttribute('data-thumb') || '#' + (frame.getAttribute('width') || frame.getAttribute('height'))}) center center no-repeat;
      background-size: cover;
      filter: blur(3px);
      position: absolute;
      top: 0; bottom: 0; left: 0; right: 0;
    `
    const noticeWrapper = frDocument.createElement('div')
    noticeWrapper.style = `
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      background: rgb(225,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(225,255,255,1) 0%, rgba(225,255,255,1) 7%, rgba(225,255,255,1) 12%, rgba(253,255,255,1) 12%, rgba(230,248,253,1) 30%, rgba(200,238,251,1) 54%, rgba(190,228,248,1) 75%, rgba(177,216,245,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(225,255,255,1) 0%,rgba(225,255,255,1) 7%,rgba(225,255,255,1) 12%,rgba(253,255,255,1) 12%,rgba(230,248,253,1) 30%,rgba(200,238,251,1) 54%,rgba(190,228,248,1) 75%,rgba(177,216,245,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(225,255,255,1) 0%,rgba(225,255,255,1) 7%,rgba(225,255,255,1) 12%,rgba(253,255,255,1) 12%,rgba(230,248,253,1) 30%,rgba(200,238,251,1) 54%,rgba(190,228,248,1) 75%,rgba(177,216,245,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1ffff', endColorstr='#b1d8f5',GradientType=0 ); /* IE6-9 */
      border-radius: 2px;
      box-shadow: 0 0 5px rgba(0,0,0,.5);
      padding: .5em 1em;
      width: 80%; max-width: 760px;
    `
 
    const noticeHeader = frDocument.createElement('h1')
    noticeHeader.style = `font-size: 15px`
    noticeHeader.innerHTML = `
      Mit dem Aufruf des Videos erklärst Du Dich einverstanden,
      dass Deine Daten an  ${frame.getAttribute('data-service-provider-name') || getHostname(url)}  übermittelt werden.
    `
 
    const noticeInfo = frDocument.createElement('p')
    noticeInfo.innerHTML = `
    Wir von ${window.location.hostname} distanzieren hiermit ausdrücklich von den Inhalten, die sich hinter den bei ${frame.getAttribute('data-service-provider-name') || getHostname(url)} (einschließlich der
untergeordneten Seiten) aufgeführten Links, den dahinter stehenden Servern, weiterführenden Links und sämtlichen anderen sichtbaren oder unsichtbaren Inhalten verbergen.<br>Hier sehen sie nochmal den <a href="https://www.servicecrewloreth.de/datenschutz.html"" target="_blank">Datenschutz</a> von ${window.location.hostname}
    `
    
        const noticeButton = frDocument.createElement('button')
    noticeButton.style = `
      display: block;
      float: right;
    `
    noticeButton.innerHTML = 'Ich habe verstanden und stimme zu'
    noticeButton.onclick = () => frame.setAttribute('src', url)
 
    const noticeSecondary = frDocument.createElement('a')
    noticeSecondary.style = `
      clear: right;
      display: block;
      float: right;
      font-size: .75em;
    `
    noticeSecondary.href = url
    noticeSecondary.target = '_blank'
    noticeSecondary.rel = 'noopener'
    noticeSecondary.innerHTML = ''
    
    noticeWrapper.appendChild(noticeHeader)
    noticeWrapper.appendChild(noticeInfo)
    noticeWrapper.appendChild(noticeButton)
    noticeWrapper.appendChild(noticeSecondary)
    
    body.style = `font-family: Lato, sans-serif`
    body.appendChild(blur)
    body.appendChild(noticeWrapper)
 
  }
}  
  
 
  
</script>
 
    
 
 

Schlie�en

Wollte es nur mal zeigen, wie es jetzt ausschaut.

Mit freundlichen Grüßen

Daishi

Daishi

Wolfgang findet das Top!

Antworten

#5 | RE: Fehlersuche: Habe hier beim iFrame etwas festgestellt - Verbindungsgeschwindigkeit! datum

02.09.2023 08:33 (zuletzt bearbeitet: 04.09.2023 21:24)

Daishi

Informationen anzeigen

Beitr�ge:	337
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	291

Zitat von Wolfgang im Beitrag #3
Hallo Daishi, ich denke, wir müssen uns nach einem anderen Skript umschauen, dass die Ladezeit einer Seite anzeigt. Auch in der Vergangenheit hat das Lade-Skript nicht gut mit anderen Skripten zusammengearbeitet. Ich habe noch keine vernünftige Lösung gefunden. Auch das Umschreiben des Lade-Skripts brachte kein Erfolg! Wolfgang

Hallo Wolfgang, habe eine Lösung gefunden, diese verträgt sich auch mit meinem neuen geschriebenen Script Ihre Verbindungsgeschwindigkeit.

Habe eine einfache Version Seitenladezeit-Script nur als Alert geschrieben. Kann in HTML in Fußleiste eingetragen werden und funktioniert im Forum.

Seitenladezeit:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 

<script type='text/javascript'>
<!--
var jetzt = new Date();
 
function seitenladezeit() {
    var endzeit = new Date();
    var diff = endzeit.getTime() - jetzt.getTime();
    alert("Es hat " + diff/1000 + " Sekunden gedauert, diese Seite zu laden !");
}
window.onload = seitenladezeit;
//-->
</script>
 
 

Ich hatte da noch eine Idee und Inspiration, und sodass es cool ausschaut, und moderner wirkt, sitze an dem Script jetzt schon 3 Tage dran. Bekomme es aber im Forum und im Portal nicht sauber hin. Finde den Fehler nicht, warum er es im Portal nicht sauber anzeigt.

Bin da schon ziemlich am verzweifeln. Habe jetzt mal 2 Stunden geschlafen, mache mich aber gleich ans Werk und versuche es weiter irgendwie hinzubekommen, dass es im Forum und im Portal sauber anzeigt.

Um es mal zu zeigen, wie es im Moment ausschaut.

Bild Portal:

Und hier mein original CodePen, so zeigt er es richtig und sauber an:

Ihre Verbindungsgeschwindigkeit ist!

Und hier mal der Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 
<style>
 
  body {
    font-family: monospace;
    font-size: 1.1em;
    padding: 22.2em;
    height: 100vh;
    
    margin: 0;
    h1 { text-align: center }
}
h1 {
    color: rgb(207, 226, 50);
  
}
h1 p {
    padding-left: 1em;
    color: rgb(2, 88, 88);
    cursor: pointer;
    transition: all 5.3s;
    font-size: 0.75em;
  P { text-align: center }
  
}
h1 p:hover {
    color: blue;
    padding-left: 1.5em;
  
}
  
</style>  
<h1 id="progress">Verbindungsgeschwindigkeit</h1>
 

<script>
  
 
var imageAddr = "https://i.ibb.co/zJ7hpnn/besch-tzender-Engel.png"; 
var downloadSize = 5616998; //bytes
 
function ShowProgressMessage(msg) {
    if (console) {
        if (typeof msg == "string") {
            console.log(msg);
        } else {
            for (var i = 2; i < msg.length; i++) {
                console.log(msg[i]);
            }
        }
    }
    
    var oProgress = document.getElementById("progress");
    if (oProgress) {
        var actualHTML = (typeof msg == "string") ? msg : msg.join("");
        oProgress.innerHTML = actualHTML;
    }
}
 
function InitiateSpeedDetection() {
    ShowProgressMessage("Bild wird heruntergeladen, bitte warten...");
    window.setTimeout(MeasureConnectionSpeed, 1);
};    
 
if (window.addEventListener) {
    window.addEventListener('load', InitiateSpeedDetection, false);
} else if (window.attachEvent) {
    window.attachEvent('onload', InitiateSpeedDetection);
}
 
function MeasureConnectionSpeed() {
    var startTime, endTime;
    var download = new Image();
    download.onload = function () {
        endTime = (new Date()).getTime();
        showResults();
    }
    
    download.onerror = function (err, msg) {
        ShowProgressMessage("Das Bild wurde nicht gefunden oder es liegt ein Downloadfehler vor");
    }
    
    startTime = (new Date()).getTime();
    var cacheBuster = "?nnn=" + startTime;
    download.src = imageAddr + cacheBuster;
    
    function showResults() {
        var duration = (endTime - startTime) / 1000;
        var bitsLoaded = downloadSize * 8;
        var speedBps = (bitsLoaded / duration).toFixed(2);
        var speedKbps = (speedBps / 1024).toFixed(2);
        var speedMbps = (speedKbps / 1024).toFixed(2);
        var speedbps = (speedBps / 8).toFixed(2);
        var speedkbps = (speedKbps / 8).toFixed(2);
        var speedmbps = (speedMbps / 8).toFixed(2);
        ShowProgressMessage([
            "Ihre Verbindungsgeschwindigkeit ist:",
            "<p>" + speedBps + " Bps" + "</p>",
            "<p>" + speedKbps + " Kbps" + "</p>",
            "<p>" + speedMbps + " Mbps" + "</p>",
            "<p>" + "&nbsp" + "</p>",
            "<p>" + speedbps  + " B/s" + "</p>",
            "<p>" + speedkbps + " KB/s" + "</p>",
            "<p>" + speedmbps + " MB/s" + "</p>"
        ]);
        document.querySelector("body > div").innerHTML=""
    }
}  
  
  
</script>  
 

Schlie�en

Wie gesagt, es war eine Idee und Inspiration. Hoffe, dass das gut ankommt, wenn aber jemand noch andere und Ideen hat nur zu, bin für alles offen. Jeder kann hier seine Ideen und Inspirationen freien Lauf lassen.

Mit freundlichen Grüßen

Daishi

Daishi

Antworten

#6 | RE: Fehlersuche: Habe hier beim iFrame etwas festgestellt - Farbfilter datum

04.09.2023 12:08 (zuletzt bearbeitet: 04.09.2023 21:25)

Daishi

Informationen anzeigen

Beitr�ge:	337
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	291

Habe noch eine neue Lösung gefunden, verträgt sich jetzt auch mit iFrames.

Habe daran lange getestet. Jedes Mal, wenn ich iFrames machte, knallte das Seitenladescript weg, egal was ich versuchte.

Jetzt geht das Ladescript, habe es irgendwie hinbekommen, dass es funktioniert mit allen 3 Scripte. War ganz schön schwierig, ich bin darin nicht so gut im Javascript, aber wie gesagt ich gebe mein Bestes, habe es jetzt auch hinbekommen, dass es im Forum sauber anzeigt, im Portal.

Bild, wie es jetzt ausschaut:

Vor allem schwierig ist es im Testforum, da das Portal nicht geht und Werbungen sind, das verschiebt sich einiges. Deswegen teste ich vieles in mein Hauptforum, na ja habe da schon 2 Styles geschrottet. Vergessen, Sicherungen zu machen (lach).

Ist ja nicht schlimm, kann man alles wieder neu schreiben, die neuen Filter unterstützt das Xobor Forum noch nicht.

Dieser Filter geht nicht im Forum:
Hier mal der Code:

1
 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67c7ea', endColorstr='#4242ff',GradientType=0 ); /* IE6-9 */

Dieser Filter geht noch im Forum:

1
 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b7b7b', endColorstr='#686868',GradientType=0 ); /* IE6-8 */

Hier mal für jeden Browser die Codes für Farbe

1
2
3
4
5
6
7
8
9
10
11
 
background: -moz-linear-gradient(top,  #7b7b7b 0%, #3b3f3e 50%, #000000 51%, #686868 100%); /* FF3.6+ */
 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7b7b7b), color-stop(50%,#3b3f3e), color-stop(51%,#000000), color-stop(100%,#686868)); /* Chrome,Safari4+ */
 
background: -webkit-linear-gradient(top,  #7b7b7b 0%,#3b3f3e 50%,#000000 51%,#686868 100%); /* Chrome10+,Safari5.1+ */
 
background: -o-linear-gradient(top,  #7b7b7b 0%,#3b3f3e 50%,#000000 51%,#686868 100%); /* Opera 11.10+ */
 
background: -ms-linear-gradient(top,  #7b7b7b 0%,#3b3f3e 50%,#000000 51%,#686868 100%); /* IE10+ */
 
background: linear-gradient(to bottom,  #7b7b7b 0%,#3b3f3e 50%,#000000 51%,#686868 100%); /* W3C */
 

Werden die Codes für die Browser nicht angegeben, wird die Farbe nicht in dem Browser angezeigt, zum Beispiel mache ich nur für /* FF3.6+ */ den code rein werden in den anderen Browser die Farbe nicht angezeigt, nur im Firefox.

Wollte nur mal Bescheid geben, meine 3 Browser hatten Updates wieder gehabt, hatte auch wieder ein Update auf PC für Net-Framework.

Hatte alles mit den neuen Filter bestückt gehabt, aber wurde nichts angezeigt. Muss jetzt alles wieder mit den alten Filter bestücken.

Nicht das welche versuchen den neuen Filter einzubinden und dieser nicht gehen und sie sich wundern. Denke das sie nach 3 bis 4 Browser Updates gehen werden.

Das ist mir nur aufgefallen.

mfg Daishi

Daishi

Antworten

#7 | iFrames, Seitenlade-Skript und Verbindungsgeschwindigkeit! datum

04.09.2023 21:21 (zuletzt bearbeitet: 05.09.2023 14:02)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3318
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1248

iFrames, Seitenlade-Skript und Verbindungsgeschwindigkeit!

Hallo Daishi,
habe hier noch eine mögliche Lösung gefunden!

Seitenladeskript:

Das Seitenlade-Skript habe ich umschreiben können!
Funktioniert jetzt auch im V6 & Mobil, arbeitet auch mit Deinem iFrame aus Beitrag #1 zusammen!
Der springende Punkt war der onload-Befehl in Zeile 28, der den Ladefehler verursacht hat!

Auch hier: Ladezeiten von Webseiten anzeigen und verkürzen!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<style>
#ladezeit {
  display:inline-block;
  margin-top:5px;
  font: 13px Arial, serif;
  color:#FCC803;
  background:#000120;
  padding:5px 20px;
  border-radius:5px;
}
</style>
 
<center>
  <div id="ladezeit">Keine Anzeige verfügbar!</div>
</center>
 
<script>
  var ladestart = new Date().getTime();  
 
  function seitenladezeit() {  
    var ladeende = new Date().getTime();  
    var ladezeit = (ladeende - ladestart) / 1000 ; 
 
    document.getElementById("ladezeit").innerHTML = "Es hat "+ ladezeit +" Sekunden gedauert, die Seite zu laden!"; 
  }
 
  window.addEventListener('load', function(){
    seitenladezeit(); 
  });
</script> 
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Verbindungsgeschwindigkeit messen:

Das ist ja ein interessantes Skript!
Passt gut mit den Seitenlade-Skript zusammen und kann überall eingebaut werden!

Was zu beachten ist!

Die Verbindungsgeschwindigkeit ist nur ein Augenblickswert, nicht wie bei den großen Webseitenmessungen.
Aber trotzdem interessant!

Was habe ich geändert?

Ich denke, dass die Farb-Filter nicht so wichtig sind, da sie nur für ältere Browser einspringen, wie z.B. für den Internet Explorer (IE)!

Habe die Style-Einträge herausgenommen und eigene verwendet, weil sie keinen Einfluss auf die Funktion haben und nur das gesamte Template verändern (z.B. body).
Habe die Console-Ausgabe gelöscht, weil sie zur eigentlichen Funktion nichts beiträgt! (Zeile 42-50)
Die vielen Speed-Angabe sind verwirrend, habe sie gekürzt und die gängige Variante mit MBit / s ausgewählt!
Musste die ID "progress" erweitern, weil sie auch hier im Forum für die Spenden verwendet wird!
Zu guter Letzt habe ich Ladeskript und Verbindungsgeschwindigkeitsskript zusammengepackt!
Habe hier eine einfache Formatierung fürs Aussehen gewählt!

Installation für alle Templates & Mobil

Das folgende Skript lässt sich gut ins Portal einbauen, läuft aber auch in der Kopf- oder Fußzeile!

Das komplette Skript kann für die Template (v1-4) in die Kopf- oder Fußzeile, für das neue Xobor V6 & Mobil nach Eigenes Javascript oder Kopfzeile kopiert werden, oder auch in eine Portal-Box!
Um das Skript auch anders zu platzieren geht das über ein Plugin unter z.B. "Obere Leiste, Untere Leiste oder Forum Übersicht" (bessere Ladezeiten)!
Wichtig! Im Plugin muss rechts oben das "Unterstützte Template" markiert werden, z.B. Business - Template (144) & Mobil - Template (177), Auswahl mit Mausklick oder Strg + Mausklick!

In Zeile 3-25 wird das Aussehen Lade- und Verbindungsgeschwindigkeit bestimmt!
In Zeile 34+35 werden die Zeiten und Geschwindigkeiten ausgegeben.
Durch Zeile 82 wird der Text für die Verbindungsgeschwindigkeit und die Geschwindigkeit selbst angezeigt, in Zeile 96 für die Ladezeit!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
 
<style>
#ladezeit, #progress_speed{
  margin-top:5px;
  font: 13px Arial, serif;
  color:#FCC803;
}
.ladezeit_portal {
  margin:10px;
  color:#FFFFFF;
  background:#000120;
  padding:5px;
  line-height:20px;
  border-radius:10px;
  max-width:500px; 
  border:5px double #778890;
  box-shadow:0px 0px 20px #ffffff;
  cursor:pointer;
  font-weight:normal !important;
}
.ladezeit_portal:hover .ladezeit_web {
  text-decoration:underline;
}
.ladezeit_web{
  font-size:14px;
  color:#ffffff;
}
</style>
 
<center>
<div class="ladezeit_portal">
 
<div class="ladezeit_web">Ladezeiten von Webseiten anzeigen</div>
 
<div id="progress_speed">Verbindungsgeschwindigkeit nicht verfügbar!</div>
<div id="ladezeit">Keine Anzeige verfügbar!</div>
 
</div>
</center>
 
<script>
  var imageAddr = "https://files.homepagemodules.de/b104774/pictures_u610_zHWgswMD.jpg"; 
  var downloadSize = 5616998; //bytes
 
  function ShowProgressMessage(msg) {    
    var oProgress = document.getElementById("progress_speed");
    if (oProgress) {
      var actualHTML = (typeof msg == "string") ? msg : msg.join("");
      oProgress.innerHTML = actualHTML;
    }
  }
 
  function InitiateSpeedDetection() {
    ShowProgressMessage("Bild wird heruntergeladen, bitte warten...");
    window.setTimeout(MeasureConnectionSpeed, 1);
  };    
 
  if (window.addEventListener) {
    window.addEventListener('load', InitiateSpeedDetection, false);
  } else if (window.attachEvent) {
    window.attachEvent('onload', InitiateSpeedDetection);
  }
 
  function MeasureConnectionSpeed() {
    var startTime, endTime;
    var download = new Image();
    download.onload = function () {
      endTime = (new Date()).getTime();
      showResults();
    }
    download.onerror = function (err, msg) {
      ShowProgressMessage("Das Bild wurde nicht gefunden oder es liegt ein Downloadfehler vor");
    }
    
    startTime = (new Date()).getTime();
    var cacheBuster = "?nnn=" + startTime;
    download.src = imageAddr + cacheBuster;
    
    function showResults() {
      var duration = (endTime - startTime) / 1000;
      var bitsLoaded = downloadSize * 8;
      var speedmbps2 = ((bitsLoaded / duration) / 8388608).toFixed(2);
      ShowProgressMessage(["<p>Die augenblickliche Verbindungsgeschwindigkeit beträgt " + speedmbps2 + " MB/s" + "!</p>"]);
      document.querySelector("body > div").innerHTML=""
    }
  }
</script>   
 
<script>
// Seitenladeskript
var ladestart = new Date().getTime();  
 
function seitenladezeit() {  
var ladeende = new Date().getTime();  
var ladezeit = (ladeende - ladestart) / 1000 ; 
 
document.getElementById("ladezeit").innerHTML = "Es hat "+ ladezeit +" Sekunden gedauert, die Seite zu laden!"; 
}
 
window.addEventListener('load', function(){
  seitenladezeit(); 
});
</script> 
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Bis dann und besten Dank für die interessanten Skripte und Ideen!
Wolfgang

Daishi findet das Top!

Antworten

#8 | RE: Cookie-Hinweis - iFrame neu überarbeitet datum

11.09.2023 22:19 (zuletzt bearbeitet: 27.02.2024 14:47)

Daishi

Informationen anzeigen

Beitr�ge:	337
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	291

Habe jetzt lange daran herumgewurstelt, bis ich es so weit hinbekommen habe, einfach und schlicht, mit Information.

Da mich immer diese blöde Werbeeinblendungen am Ende des Videos so sehr nerven, habe ich nach einer Anleitung für Javascript gesucht und diese da abgeschaut und bei mir eingebaut. Habe es auch getestet mit mehrfachen Videos. Auch das funktioniert jetzt ohne Probleme.

Mit mehrfachen Videos habe ich es im Portal und eigene Seiten getestet, funktioniert alles problemlos.

Wo ich noch Probleme habe, ist es in der Iconbar einzufügen. Egal welche Codevariante ich eingebe, es funktioniert das nicht. Das Fenster wird nur angezeigt, nur ohne Funktion und ohne Anzeige, nur der Rahmen.

Oder muss ich das alles umschreiben als Plugin und mit den Klammern - Codes?

Als Plugin habe ich es ja versucht. Ohne Klammer - Codes zeigt es mir aber im Header und Footer an, wenn ich es im Header oder Footer erstelle.

So wie ich es gesehen habe, braucht man da auch bestimmte Klammer - Codes von den Templates, und die spezielle ID Nummern, die kenne ich nicht. Finde keine detaillierte Liste wo diese IDs und die ganzen benötigten Klammer - Codes oder ich gebe es für die Suche falsch an.

Hier mal die neu überarbeite Codes für das iFrame:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
 
<style>
iframe {
  display: block;
  margin: 1em auto;
} 
 
Element {
  padding: 12px 6px;
  border: 1px groove rgb(86, 86, 86);
  border-radius: 4px;
  box-shadow: rgb(92, 92, 92) 3px 3px 3px;
}
*, ::before, ::after {
  box-sizing: inherit;
}
* {
  padding: 0px;
  margin: 0px;
}
 
Element {
}
</style>
 
<center>
<iframe allowfullscreen="" width="369px" height="298px" style="padding: 12px 6px; border: 1px groove rgb(86, 86, 86); border-radius: 4px; box-shadow: rgb(92, 92, 92) 3px 3px 3px;" 
 /*  Hier kommt die Videoadresse rein, bis zum Fragenzeichen */       
frameborder="no" data-src="https://youtube.com/embed/AF25Rj-lRjs?rel=0&autoplay=1"
data-thumb="https://i.ibb.co/q9qyTJn/0e5ad5baae6646d3953172196989155e-1.png">
</iframe>
</center>
 
<div class="clear"></div>
 
<script> 
window.onload = () => {
  const getHostname = url => {
    const a = document.createElement('a')
    a.href = url
    return a.hostname
  }
  const fr = document.getElementsByTagName('iframe')
  
  for (let i = 0; i < fr.length; i++) {
    const frame = fr[i]
    const frWindow = fr[i].contentWindow
    const frDocument = frWindow.document
    const url = frame.getAttribute('data-src')
    const body = frDocument.body
 
    const blur = frDocument.createElement('div')
    blur.style = `
      background: url(${frame.getAttribute('data-thumb') || '#' + (frame.getAttribute('transparent') || frame.getAttribute('height'))}) center center no-repeat;
      background-size: cover;
      filter: blur(3px);
      position: absolute;
      top: 0; bottom: 0; left: 0; right: 0;
    `
    const noticeWrapper = frDocument.createElement('div')
    noticeWrapper.style = `
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      border-radius: 2px;
      box-shadow: 0 0 5px rgba(0,0,0,.5);
      padding: .5em 1em;
      width: 80%; max-width: 760px;
    `
 
    const noticeHeader = frDocument.createElement('h1')
    noticeHeader.style = `font-size: 20px`
    noticeHeader.innerHTML = `
      <font color = black> Dieser Inhalt wird möglicherweise geladen von
      ${frame.getAttribute('data-service-provider-name') || getHostname(url)} cookies</font>
    `
 
    const noticeInfo = frDocument.createElement('p')
    noticeInfo.innerHTML = `
      Durch die Annahme greifen Sie auf einen Dienst zu, der von einem Drittanbieter bereitgestellt wird
       extern zu ${window.location.hostname}
       <br>
       <br>
       Hier sehen sie nochmal die <a href="https://www.servicecrewloreth.de/datenschutz.html"" target="_blank">Datenschutzerklärung</a> von ${window.location.hostname}
    `
    
        const noticeButton = frDocument.createElement('button')
    noticeButton.style = `
      display: block;
      float: right;
    `
    noticeButton.innerHTML = 'Ich habe verstanden und stimme zu'
    noticeButton.onclick = () => frame.setAttribute('src', url)
 
    const noticeSecondary = frDocument.createElement('a')
    noticeSecondary.style = `
      clear: right;
      display: block;
      float: right;
      font-size: .75em;
    `
    noticeSecondary.href = url
    noticeSecondary.target = '_blank'
    noticeSecondary.rel = 'noopener'
    noticeSecondary.innerHTML = ''
    
    noticeWrapper.appendChild(noticeHeader)
    noticeWrapper.appendChild(noticeInfo)
    noticeWrapper.appendChild(noticeButton)
    noticeWrapper.appendChild(noticeSecondary)
    
    body.style = `font-family: Lato, sans-serif`
    body.appendChild(blur)
    body.appendChild(noticeWrapper)
 
  }
}
  
</script>
 

Schlie�en

Habe hier auch die Codes eingefügt von eigener Webseite, der liest die eigene Webseite aus und zeigt sie als Text an:

1
 
${window.location.hostname}

Ich hoffe, ich konnte es so gut es geht erklären, aber ich versuche es noch in der Iconbar hinzubekommen.

Wer hierfür Ideen hat, oder Tipps, kann dies gerne tun.

Mit freundlichen Grüßen

Daishi

Daishi

Wolfgang findet das Top!

Antworten

#9 | Fehlersuche: Cookie-Hinweis für iFrames datum

17.09.2023 11:43 (zuletzt bearbeitet: 17.09.2023 11:51)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3318
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1248

Fehlersuche: Cookie-Hinweis für iFrames

Hallo Daishi.

Klasse Idee!
Nochmal besten Dank für die im Skript verwendeten Elemente, kann man bestimmt wo anders auch gut einsetzen!!!

Es könnte aber sein, dass Dein Cookie-Hinweis nicht mehr erforderlich ist!
Das Plugin "Externe Inhalte einbinden" soll jetzt für alle Templates erweitert werden!
Hier kann man zusätzlich Cookie-Hinweise setzen!

Zu Deinem Cookie-Hinweis:

Habe die CSS und den Text aus Beitrag #8 etwas überarbeitet.
Nur Dein Logo unter "data-thumb" kommt nicht so recht zu Geltung, es versteckt sich hinter dem Video!
Wird allerdings angezeigt, solange das Video noch nicht geladen ist!

Installation für alle Template & Mobil

Der HTML-Code zur Übersicht

Der neue Foren-Code

Einbau HTML-Script

Bis dann und gutes Gelingen
Wolfgang

Daishi findet das Top!

Antworten

#10 | Cookie-Hinweis für iFrames für Short Youtube Kurz-Videos datum

09.12.2023 10:50 (zuletzt bearbeitet: 10.12.2023 05:17)

Daishi

Informationen anzeigen

Beitr�ge:	337
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	291

Hallo, ihr lieben, wünsche euch ein schönes Wochenende.

Ein Kunde hat mich gefragt, ob man im Forum auch Shorts einbinden kann?

Ich tüftelte daran jetzt 4 Tage und habe es jetzt hinbekommen, hatte ja jetzt frei und habe jetzt die ganze Nacht daran gesessen und alle Variationen durchprobiert und habe es jetzt geschafft.

Ich habe hier Wolfgangs Script benutzt und ein wenig abgeändert, also das Haupt Lob geht an @Wolfgang. Habe nur kleinere Anpassung gemacht, hoffe, dass ich das soweit richtig gemacht habe.

Das Hauptscript läuft als Plugin, und für das Einfügen sind Forencodes nötig, damit das geht. Auch diese Arbeit stammt von Wolfgang, habe da nur den Namen geändert und das Bild in der "data-thumb ".

Also wie gesagt, ich möchte mich hier nicht mit falschen Federn schmücken, oder hier Unheil anfechten. Habe mir die ganze Zeit überlegt, was ich machen kann, dann kam mir die Idee, dass ja Wolfgang was gemacht hatte für die Videos. Habe nur seine Idee genommen und etwas abgeändert.

Also für die Shorts muss das Skript als Plugin unter "Untere Leiste - Header" anzulegen (bessere Ladezeiten)!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
<style>
.iframeCookie {
  max-width:315px;
  height:560px; 
  display: block;
  margin: 20px;
  padding: 12px 6px;
  border: 1px groove rgb(86, 86, 86); 
  border-radius: 4px; 
  box-shadow: rgb(92, 92, 92) 3px 3px 3px;
}
</style>
 
<script> 
window.onload = () => {
  const getHostname = url => {
    const a = document.createElement('a')
    a.href = url
    return a.hostname
  }
  const fr = document.getElementsByTagName('iframe')
  
  for (let i = 0; i < fr.length; i++) {
    const frame = fr[i]
    const frWindow = fr[i].contentWindow
    const frDocument = frWindow.document
    const url = frame.getAttribute('data-src')
    const body = frDocument.body
 
    const blur = frDocument.createElement('div')
    blur.style = `
      background: url(${frame.getAttribute('data-thumb') || '#' + (frame.getAttribute('transparent') || frame.getAttribute('height'))}) center center no-repeat;
      background-size: cover;
      filter: blur(3px);
      position: absolute;
      top: 0; bottom: 0; left: 0; right: 0;
    `
    const noticeWrapper = frDocument.createElement('div')
    noticeWrapper.style = `
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      border-radius: 2px;
      box-shadow: 0 0 5px rgba(0,0,0,.5);
      padding: .5em 1em;
      width: 80%; max-width: 760px;
    `
 
    const noticeHeader = frDocument.createElement('h1')
    noticeHeader.style = `font-size: 20px`
    noticeHeader.innerHTML = `
      <font color = black> Es werden Cookies von ${frame.getAttribute('data-service-provider-name') || getHostname(url)} gespeichert.</font>
    `
 
    const noticeInfo = frDocument.createElement('p')
    noticeInfo.innerHTML = `
      Durch die Annahme greifen Sie auf einen Dienst zu, der von einem Drittanbieter extern für <i>${window.location.hostname}</i> bereitgestellt wird.
       <br>
       <br>
       Hier sehen sie die detailierte <a href="https://www.servicecrewloreth.de/datenschutz.html"" target="_blank">Datenschutzerklärung</a> von <i>${window.location.hostname}</i>.
    `
    
        const noticeButton = frDocument.createElement('button')
    noticeButton.style = `
      display: block;
      float: right;
    `
    noticeButton.innerHTML = 'Ich habe verstanden und stimme zu'
    noticeButton.onclick = () => frame.setAttribute('src', url)
 
    const noticeSecondary = frDocument.createElement('a')
    noticeSecondary.style = `
      clear: right;
      display: block;
      float: right;
      font-size: .75em;
    `
    noticeSecondary.href = url
    noticeSecondary.target = '_blank'
    noticeSecondary.rel = 'noopener'
    noticeSecondary.innerHTML = ''
    
    noticeWrapper.appendChild(noticeHeader)
    noticeWrapper.appendChild(noticeInfo)
    noticeWrapper.appendChild(noticeButton)
    noticeWrapper.appendChild(noticeSecondary)
    
    body.style = `font-family: Lato, sans-serif`
    body.appendChild(blur)
    body.appendChild(noticeWrapper)
 
  }
}
</script>
 
 

Schlie�en

Und hier der Forencode:

Ersetze:

1
 
[Short+iframe]

1
 
...

1
 
[/Short+iframe]

Mit:

1
 
<iframe class="iframeCookie" frameborder="0" data-src="

1
 
...

1
 
" data-thumb="//files.homepagemodules.de/b906480/a_343_0e0996c6.jpeg" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"></iframe>

Weitere Einstellungen:

1
 
Reihenfolge: 0

Grafik:

1
 
//files.homepagemodules.de/b906480/a_344_b1ff38df.png

Ich hoffe, ich habe es so gut es geht erklärt, und hoffe, dass es ok war, die Idee für die YouTube Shorts zu nutzen.

Short YouTube kurz Videos!

Ich hoffe, dass mir hier niemand böse deswegen ist, weil ich das Script von Wolfgang verwendet habe.

Nette Grüße

Daishi

Daishi

Wolfgang findet das Top!

Antworten

Leere Profilfelder löschen - Installation für alle Templates � � Bilderrahmen für das Bild

Seite 1 von 2 � Seite 1 2 Seite �

�hnliche Themen

Antworten

Letzter Beitrag

Videos zeitweise nicht verfügbar!
Erstellt im Forum Ank�ndigungen & Termine, wichtige News! von Wolfgang 1 15.03.2024 07:26
Wolfgang • Zugriffe: 146

Das Plugin "Externe Inhalte einbinden" - Cookie Abfrage erweitern
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

12.03.2024 10:08
von

Kipper-Spedition • Zugriffe: 330

Cookie-Fenster --> Das wäre eine elegante Lösung für Xobor-Foren
Erstellt im Forum Alles, was noch so �brig bleibt von 844er 1 05.08.2021 19:37
Wolfgang • Zugriffe: 1080
Farb-, Größen- und Textanpassung für den neuen Cookie - Hinweis / Teil 1-4
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 9 06.03.2022 00:02
Wolfgang • Zugriffe: 2196
YouTube-Videogalerie für das eigene Forum installieren!
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 1 08.12.2020 23:42
Wolfgang • Zugriffe: 1519
YouTube-Videos werden jetzt in der Vorschau angezeigt!
Erstellt im Forum Ank�ndigungen & Termine, wichtige News! von Wolfgang 1 23.12.2018 10:43
Wolfgang • Zugriffe: 632

YouTube Video-Link in Embed-Link konvertieren (Video-Konverter)!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

09.07.2019 19:17
von

Wolfgang • Zugriffe: 1309

Cookie Hinweis - Cookie Info
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 1 05.12.2018 17:21
Wolfgang • Zugriffe: 912

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 85 €

78%