Forum - Cookie-Hinweis: Wo habe ich hier beim iFrame einen Fehler gemacht - 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: Wo habe ich hier beim iFrame einen Fehler gemacht - Ladeskript und Verbindungsgeschwindigkeit?

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: Wo habe ich hier beim iFrame einen Fehler gemacht - Ladeskript und Verbindungsgeschwindigkeit? datum

28.08.2023 09:53 (zuletzt bearbeitet: 17.09.2023 11:53)

Daishi

Informationen anzeigen

Beitr�ge:	268
Registriert seit:	08.01.2022

Homepage:	Link
Letzte Spende	Betrag 15 � Forum Spende
Likes	226

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:	268
Registriert seit:	08.01.2022

Homepage:	Link
Letzte Spende	Betrag 15 � Forum Spende
Likes	226

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:	268
Registriert seit:	08.01.2022

Homepage:	Link
Letzte Spende	Betrag 15 � Forum Spende
Likes	226

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:	268
Registriert seit:	08.01.2022

Homepage:	Link
Letzte Spende	Betrag 15 � Forum Spende
Likes	226

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:	268
Registriert seit:	08.01.2022

Homepage:	Link
Letzte Spende	Betrag 15 � Forum Spende
Likes	226

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:	3186
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Likes	1097

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: 17.09.2023 11:52)

Daishi

Informationen anzeigen

Beitr�ge:	268
Registriert seit:	08.01.2022

Homepage:	Link
Letzte Spende	Betrag 15 � Forum Spende
Likes	226

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

Bild, wie es ausschaut:

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.

Bild, wie es ausschaut:

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:	3186
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Likes	1097

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

Tooltip für Spendenbutton � � Neuer Foren-Code: Formularfelder mit "fieldset" und "legend"!

�hnliche Themen

Antworten

Letzter Beitrag

Das Aussehen ist in jedem Browser anders, mal wird nichts angezeigt oder mit Fehler
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Daishi

21.08.2023 12:04
von

Daishi • Zugriffe: 83

Besondere Foren-Codes für Informationen, Hilfe, Fehler, Warnungen und Geheimes
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

20.02.2022 16:59
von

Wolfgang • Zugriffe: 420

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: 1020
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: 2051
Xobor-Spoiler mit Hinweis
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 0 01.01.2021 19:49
Wolfgang • Zugriffe: 890
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: 887

Verlinkte Grafik - Hinweis auf spezielle Beiträge, Ereignisse und Favoriten!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

19.03.2017 08:25
von

Wolfgang • Zugriffe: 1943

Sie wurden vom Forum abgemeldet. ... Alle Cookies wurden gelöscht.
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Aquostic

20.08.2023 11:57
von

Wolfgang • Zugriffe: 1551

"Fehler gefunden! - Button" einbauen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 8 18.09.2016 16:23
Scannerxy • Zugriffe: 1656

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 €

141%