orestbida / iframemanager Goto Github PK
View Code? Open in Web Editor NEW🍪 GDPR friendly iframe manager written in vanilla js
Home Page: https://orestbida.com/demo-projects/iframemanager/demo1/
License: MIT License
🍪 GDPR friendly iframe manager written in vanilla js
Home Page: https://orestbida.com/demo-projects/iframemanager/demo1/
License: MIT License
Hello, could this concept be used to get approval first with Google Maps before publishing the maps? If so, how would you do that?
Hi! We are using your Cookie Consent javascript plugin (😍) and the IframeManager looks like a very interesting companion for that!
For simplicity of the use, could you consider a possibility of supporting the service configurations fully straight in the div and using the same languages object for all iframes?
That would make using this plugin a much more versatile in situations when the client can update their content through some CMS and add new embeds as they wish. The current way of defining each embed separately on config is hard to achieve, when embeds change dynamically. With the approach of supporting all configs in the div, it would become much more easier just to do some regexp and replace the iframe embed with the div.
I am embedding a google map, but using the iframemanager the resulting maps is very small. I tried to set the width and height manually in the div, but it does not change size?
<div class="map-area" data-service="googleMaps" data-id="map1" width="100%" height="450px"></div>
On some occasions, iframes get created twice — happens with custom “widgets” like twitter's ones.
Hello,
Thanks for this neat proposition !
I am trying to get this working with Docusaurus.
While I get it working when I load the page where the iframe is embedded (for example https://opencomp.github.io/docv2/saisir-les-resultats/utiliser-opencomp-genie/detecter-les-resultats/#en-savoir-plus-sur-les-diff%C3%A9rents-statuts-de-traitement-possibles), if I load another page then browse to a page where the div element is inserted, the javascript is not triggered. This is due to the Single Page Application architecture used by Docusaurus v2 / react but I have no idea how to get this working on page change ?
Any idea / guidance to get this working ?
Thanks 🙂
Hi,
i am loading some video portfolios via ajax on an wordpress theme. Is there a way to re-run the script to detect the that are new to the dom?
Thanks for your help!
Cheers
Tobias
Is there a way to accept the iframes in the cookieconsent menu?
Hi, I'm using the latest RC of CookieConsent 3 but I can't reassemble this example https://stackblitz.com/edit/web-platform-mwccsc?file=index.js - I always get this kind of error and I can't explain myself why:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')
at H (iframemanager.js:6:3380)
at Object.acceptService (iframemanager.js:6:4372)
at onAccept ((Index):172:43)
at W (cookieconsent.js:7:3657)
at e.run (cookieconsent.js:7:20793)
H @ iframemanager.js:6
acceptService @ iframemanager.js:6
onAccept @ (Index):172
W @ cookieconsent.js:7
e.run @ cookieconsent.js:7
await in e.run (asynchron)
(anonym) @ (Index):127
Set up rollup or vite.
Terser + postcss are enough for now.
I have a website that doesn't currently store any user data, and I'd like to use this plugin to require consent to load in embedded video. I'd rather not have to add a GDPR cookie disclosure just to save GDPR consent information, so is there a way to turn off cookies on this script and just require the user to consent every time they want to load in a video?
I have a hard time getting this to work with SvelteKit.
The div stays black and I get the following error in console:
Outside a Svelte component, it works fine. The strange thing is, it worked a few times within a Svelte component. But after another reload it was gone (nothing changed). Now I can't reproduce the working state ... Could you provide a SvelteKit example in StackBlitz?
Currently, I have the css and js part via CDN in app.html and also tried to load them with svelte:head inside the component.
If a specific service is accepted, and there is at least one iframe not visible in the viewport, calling .rejectService('<specific_service>')
does not reset the iframe. Instead, as soon as you scroll to that iframe, it will load as if the rejectService
method was never called.
This occurs with specific services only:
.rejectService('all')
ok.rejectService('youtube')
failI am looking into support for Slideshare.net
Is there a way to sponsor this feature (with a small budget)?
Hello,
I am trying to use the iframemanager together with the cookieconsent plugin. The cookieconsent works, but the iframemanager does not.
Code:
https://pastebin.com/E5EYbpEe
I hope someone can help.
Apparently Tweets or other name "posts" on X get either rendered as images now or theres a bug
with the links now: Clicking "Read more on X" has no effect.
But last time I checked this and it worked X was still called Twitter.
So not sure if it is the iframemanager or on Xs site thats causing the issue.
Hi, love the project!
However, can I add iframe arguments like width etc.?
For example, this one:
<script src="https://static.airtable.com/js/embed/embed_snippet_v1.js"></script><iframe class="airtable-embed airtable-dynamic-height" src="https://airtable.com/embed/shr5EBHUmHzStubDx?backgroundColor=orange" frameborder="0" onmousewheel="" width="100%" height="1541" style="background: transparent; border: 1px solid #ccc;" loading="lazy"></iframe>
It would be great if IframeManager could have an option to disable cookies. If using CookieConsent integration it's all handled there. It just makes documenting the cookies a bit easier as with the current setup you end up documenting every cookie for every service setup when really you could cover it all under a single cookie (CookieConsent's)
Is there a way to allow load iframes when a category gets accepted from CookieConsent per default but allow the single-service management when not authorized?
I mean, one with allowed marketing cookies will get iframes loaded. The others could agree only to YouTube service on iframe. If they'll later eventually agree and disagree with marketing, the consent will be removed as well for YT.
I load the IframeManager only when the iframe is used in the WordPress Content (created a super simple plugin), and CookieConsent is running on all pages. Maybe a parameter will check the specified category before using cc_youtube
or cc_vimeo
? Or did I miss something?
P.S. Thanks for a great tool, hope you enjoy your ☕
Hi there,
Two questions:
Is it be possible to merge all the active services cookies into only one json cookie? (a bit like the cookieconsent script does!).
A unified cookie would be also easier to be specified within the cookieconsent modal cookie_table
I've read about some questions from last year about dynamically generated iframes and the idea of creating automatically the
Thanks!
I got it to work so I can accept a cookie category in cookieconsent and have it also accept/deny the appropriate ones for iframemanager. Is it possible the other way round? So someone rejects the "external" category in CC, but then clicks on "Don't ask again" on an embedded YT iframe. This will not show up in CCs settings, since I cannot read it the other way round - or did I miss something?
Cheers!
Support for dynamically added iframes like:
<a class="twitter-timeline" data-tweet-limit=5 href="someTwitterUrlHere"></a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8" data-cookiecategory="twitter" type="text/plain"></script>
rem/em
is a safer choice (safari doesn't like px
based units).
Hi,
I'm trying to get this to work with the normal embed iframe (not through the embed api) e.g. <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d40299.30426384719!2d4.340397959224176!3d50.85511876045215!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c3a4ed73c76867%3A0xc18b3a66787302a7!2sBrussel!5e0!3m2!1snl!2sbe!4v1666528240497!5m2!1snl!2sbe" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
. When loading the iframe, the src string is encoded (video.iframe.src = encodeURI(src);
), which prevents the marker from being rendered. When removing the encodeURI() function, the marker is render correctly.
Could you add a flag to disable the encoding?
Kind regards,
Tom
Could/should I use iframemanager to embed a leaflet map in a gdpr complient way? Is there some example? Or can you recommend a different solution?
I would like to define the leaflet map and its layers on the same web page but defer the loading of background layers from external servers until a user explicitly confirms it.
=> Instead of an embed url, can I also specify some html content (containing the map definition) directly?
Related: #9
When setting parameters using the iframe
configuration, those params are added to the embed URL, but the <iframe>
also gets an param
attribute with the specified string:
vimeo: {
embedUrl: 'https://player.vimeo.com/video/{data-id}',
iframe: {
allow: 'fullscreen; picture-in-picture, allowfullscreen',
params: 'title=0&byline=0&portrait=0',
},
},
Results in this HTML:
<iframe allow="fullscreen; picture-in-picture, allowfullscreen" params="title=0&byline=0&portrait=0" lazy="" title="Vimeo" src="https://player.vimeo.com/video/252417024?title=0&byline=0&portrait=0"></iframe>
The params
attribute should not be there.
Some ideas how to solve this:
params
configuration even required? The parameters can just be added to the embedUrl
.params
configuration value should be handled specially and not added as an attribute.What we want for video-iframes is this:
Editor set up an area that shall contain an embedded video and may also specify an (internal) preview-image.
Visitor sees initially: (both those that not has accepted and those who has accepted that category)
Preview-image and a play button on top of it.
If editor did not specify a preview-image a default is used.
(I.e. it only load data from us, never the external service)
When visitor presses image or play-button:
If visitor has accepted that service, the video with the iframe is displayed. (loading data from external service)
If visitor not (yet) has accepted it displays a text and buttons on top of the image (white-faded). Just as iframemanager looks like when you not yet have accepted the service.
"Accept this", and ( "Accept all of type X" or "Open cookie settings" ). The first one only loads the iframe of that vidoe and the second one calls cookieconsent to accept all of that type or open dialog.
NOTE: Currently I have set this up myself with cookieconsent, and are not (yet?) using iframemanager.
Idea: Initially we could add a
<a href="urlOfExternalService" rel="noreferrer">SomeTitle</a>
either as the thing to be replaced instead of the div or we can add it inside the div and the javascript will remove the link once triggered (it could have some data-cc-nonjs attribute or something.
Follow-up to the discussion in #10
Some external content may require external resources to load before it can be displayed, some will be visible almost immediately. In the first case, showing the overlay and then fading it out (the current behaviour) makes sense. But if the external content will be displayed immediately, having the overlay just show up very briefly and then fade out immediately doesn't look great, it looks more like a bug to the users.
As a solution, I suggest an optional option (either for the entire library or for individual services) to adjust this behaviour. If activated, the option should change the behaviour as followed:
onAccept
callback).Hi there!
It would be neat if button properties like box-shadow
, border-radius
or padding
were accessible via custom properties. That way, one wouldn't need to override the somewhat cryptic class names.
Thanks!
By default, iframes will use a 16:9 aspect ratio (unless custom css is used). Add data-ratio
attribute for more flexibility.
Originally posted by jelen07 August 24, 2022
Hi, is there any way how to integrate those two tools together?
and vice versa.
In one use case, it was necessary to pass the {data-id} variable within the printed message, and this variable was not rewritten by the token.
After analyzing the code, this update was possible by changing one line of code (line 568) to this:
notice && notice_text.insertAdjacentHTML('beforeend', noticeText.replaceAll(DATA_ID_PLACEHOLDER, serviceProp._id) || '');
Right now the code is working.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.