templates/iframe/main_flex.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>First-ID Test Page - Iframe (Flex)</title>
  6.     <link rel="icon"
  7.           href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
  8.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
  9.           integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
  10.     <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
  11.             integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
  12.             crossorigin="anonymous"></script>
  13.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"
  14.             integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
  15.             crossorigin="anonymous"></script>
  16. </head>
  18. <body>
  19. <nav class="navbar navbar-expand-lg navbar-light bg-light">
  20.     <a class="navbar-brand" href="{{ path('app_index') }}">{{ site_name }}</a>
  21.     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
  22.             aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  23.         <span class="navbar-toggler-icon"></span>
  24.     </button>
  25. </nav>
  27. <div class="container mt-4">
  28.     <div class="row">
  29.         <div class="col-md-12">
  30.             <h1>First-ID Test Page (Flex + Iframe)</h1>
  32.             <div class="card mb-4">
  33.                 <div class="card-header">Page parente (Flex)</div>
  34.                 <div class="card-body">
  35.                     <div>FirstId (cookie) : <span id="mainFirstIdDisplay" class="font-monospace">En attente...</span></div>
  36.                     <div class="text-muted" style="font-size: 12px;">Le loader Flex s’occupe de générer/mettre à jour le cookie côté parent.</div>
  37.                 </div>
  38.             </div>
  40.             <h2>Iframe Content</h2>
  41.             <iframe id="testIframe" src="{{ path('app_iframe_content') }}" width="100%" height="1000"></iframe>
  42.         </div>
  43.     </div>
  44. </div>
  46. <script src="https://cdn.preprod.first-id.fr/sdk/loader/loader-latest-flex-no-tcf.js?id=1234567890"></script>
  47. <script>
  49.     function getCookieValueFromCookieName(cookieName) {
  50.         let cookieArr = document.cookie.split(";");
  51.         for (let i = 0; i < cookieArr.length; i++) {
  52.             let cookiePair = cookieArr[i].split("=");
  53.             if (cookieName === cookiePair[0].trim()) {
  54.                 return decodeURIComponent(cookiePair[1]);
  55.             }
  56.         }
  57.         return null;
  58.     }
  60.     function checkFirstidCookie() {
  61.         let fid = getCookieValueFromCookieName('firstid')
  62.         if (fid) {
  63.             console.log(`First ID : ${fid}`)
  64.         } else {
  65.             console.log('No First ID cookie find.')
  66.         }
  69.         if (fid) {
  70.             $('#mainFirstIdDisplay').text(fid)
  71.         } else {
  72.             $('#mainFirstIdDisplay').text('No First ID cookie find.')
  73.         }
  74.     }
  76.     setInterval(checkFirstidCookie, 500)
  77. </script>
  79. </body>
  80. </html>