Skip to content

Ghepes/Embedded

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

65 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Embedded iframe

@Ghepes/Enbeded

Head Accept domain security for main domain:

<head>
    <title></title>
    <meta charset="utf-8" />
    <!-- Permite încorporarea în iframes -->
    <meta http-equiv="Content-Security-Policy" content="frame-ancestors 'self' https://www.wromo.com">
</head>

Body ifram No security

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    </head>
    <body>
        <iframe src="https://www.wromo.com/index-business.html" width="100%" height="640px" frameborder="0" scrolling="0"></iframe>
    </body>  
</html>

iframe full-screen-preview__frame

<iframe class="full-screen-preview__frame" src="https://www.wromo.com/tf/xeco/" name="preview-frame" frameborder="0" noresize="noresize" data-view="fullScreenPreview" allow="geolocation 'self'; autoplay 'self'" style="height: 1217px;">
</iframe>

Exemple iframe cookiebot

<iframe tabindex="-1" role="presentation" aria-hidden="true" title="Blank" src="https://consentcdn.cookiebot.com/sdk/bc-v4.min.html" style="position: absolute; width: 1px; height: 1px; top: -9999px;"></iframe>

Exemple 4000 milisecunde = 4 secunde


<iframe id="myFrame" src="https://ai.wromo.com/img/index/" width="600" height="400"></iframe>

<script>
function refreshFrame() {
  var frame = document.getElementById('myFrame');
  frame.src = frame.src;
}

setInterval(refreshFrame, 4000); // 4000 milisecunde = 4 secunde
</script> 

Exemple Non blok embedded .js from Gist github like cdn


<script type="text/javascript" charset="UTF-8" async="" src="https://gist.githubusercontent.com/Ghepes/68d961b429b062c123857ab3c90a794a/raw/1b447167da3f31dab4b2eb0dde2d1b121b83820e/login-attempts?renew=false&amp;referer=iframe-wromo.test&amp;dnt=false&amp;init=false"></script><script type="text/javascript" async="" src="https://gist.githubusercontent.com/Ghepes/204501b59fccddc5fa322a2d2963fb0b/raw/f7b07122080e2cb54e0f293a12f8fb34c921f07d/app.min.js" nonce=""></script><script type="text/javascript" async="" src="https://gist.githubusercontent.com/Ghepes/204501b59fccddc5fa322a2d2963fb0b/raw/f7b07122080e2cb54e0f293a12f8fb34c921f07d/bootstrap-slider.min.js" nonce=""></script><script type="text/javascript" async="" src="https://gist.github.com/Ghepes/204501b59fccddc5fa322a2d2963fb0b.js" nonce=""></script><script type="text/javascript" async="" src=""></script><script async="" src=""></script><script>
    var xhr = new XMLHttpRequest();
    xhr.open("OPTIONS", "", true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send();
</script>

Exemple iframe with css icon end js ... function to fix height of iframe!

//]]>
</script><link rel="stylesheet" media="all" href="https://public-assets.envato-static.com/assets/market/core/index-1870c48b7aeda502aff780c5a21bd7b15ab21ebc2ebb4b5fa87c65b862ceb3a8.css">
    <link rel="stylesheet" media="all" href="https://public-assets.envato-static.com/assets/market/pages/preview/index-c20c294967c4ed0be90d33e130e591a57859fccaebd0a19bf00bf499d001afc3.css">

      <link rel="apple-touch-icon-precomposed" type="image/x-icon" href="https://public-assets.envato-static.com/icons/themeforest.net/apple-touch-icon-72x72-precomposed.png" sizes="72x72">
  <link rel="apple-touch-icon-precomposed" type="image/x-icon" href="https://public-assets.envato-static.com/icons/themeforest.net/apple-touch-icon-114x114-precomposed.png" sizes="114x114">
  <link rel="apple-touch-icon-precomposed" type="image/x-icon" href="https://public-assets.envato-static.com/icons/themeforest.net/apple-touch-icon-144x144-precomposed.png" sizes="144x144">
<link rel="apple-touch-icon-precomposed" type="image/x-icon" href="https://public-assets.envato-static.com/icons/themeforest.net/apple-touch-icon-precomposed.png">

    <script src="index-12553ba97c0c709bc106912064580bef531a9617671f599502aca9598a9086fa.js" nonce=""></script>

    <script nonce="">
//<![CDATA[
      //function to fix height of iframe!
      var calcHeight = function() {
        var headerDimensions = $('.preview__header').height();
        $('.full-screen-preview__frame').height($(window).height() - headerDimensions);
      }

      $(document).ready(function() {
        calcHeight();
      });

      $(window).resize(function() {
        calcHeight();
      }).load(function() {
        calcHeight();
      });

//]]>
</script>

Exemple Geolocation iframe

<iframe class="full-screen-preview__frame" src="https://www.wromo.com/" name="preview-frame" frameborder="0" noresize="noresize" data-view="fullScreenPreview" allow="geolocation 'self'; autoplay 'self'" style="height: 1217px;">
</iframe>


    <script nonce="">
//<![CDATA[
      $(function(){viewloader.execute(Views);});

//]]>
</script>
    <script nonce="">

Exemple oembed

<link rel="alternate" type="application/json+oembed" href="http://www.domain.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fwww.domain.com%3A433%2F">

Exemple ( manifest.json ) dns-prefetch api

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
        <meta name="theme-color" content="#000000">
        <link rel="manifest" href="/core/manifest.json">
        <link rel="dns-prefetch" href="https://js.domain.com" crossorigin>
        <link rel="dns-prefetch" href="https://customer.api.domain.com" crossorigin>
        <link rel="dns-prefetch" href="https://conversation.api.domain.com" crossorigin>
        <link rel="dns-prefetch" href="https://targeting.api.domain.com" crossorigin>
        <link rel="dns-prefetch" href="https://metrics.api.domain.com" crossorigin>
        <title>Domain Widget</title>
        <script type="text/javascript">
            __ENV__ = "PRODUCTION",
            __BUILD_ID__ = "2000000-abcdefg",
            __REGION__ = window.location.search.match("[\\?&]region=([^&#]*)") ? window.location.search.match("[\\?&]region=([^&#]*)")[1] : "US"
        </script>
        <link rel="preload" href="/core/assets/js/runtime~main.a7777777.js" as="script" crossorigin="anonymous">
        <link rel="preload" href="/core/assets/js/9.0a000000.chunk.js" as="script" crossorigin="anonymous">
        <link rel="preload" href="/core/assets/js/main~000000.011010101.chunk.js" as="script" crossorigin="anonymous">
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
        <script src="/core/assets/js/runtime~main.a7777777.js" crossorigin="anonymous"></script>
        <script src="/core/assets/js/9.0a000000.chunk.js" crossorigin="anonymous"></script>
        <script src="/core/assets/js/main~000000.011010101.chunk.js" crossorigin="anonymous"></script>
    </body>
</html>

3D Enbeded Content Website

3D Enbeded Content

Deny Domain Info

wen bei website domain is set 'X-Frame-Options' to 'deny', which prevents the site from being embedded in an iframe. then you won't be able to embed that page in an iframe on your site using security policies like Content-Security-Policy or X-Frame- Options. In this case, you should consider other methods or alternatives to display the content of that page on your site.

About

Enbeded wromox repo

Topics

Resources

License

Contributing

Security policy

Stars

Watchers

Forks

Packages

 
 
 

Contributors

Languages