All geek questions in one place

Embed Bootstrap webpage in iframe

I am working on a SaaS application that essentially provides a complete web page to a client. A client can access his page at: http://client.myapp.com . However, I want customers to be able to easily embed this page on their site. For now, I am just providing an iframe embed code with a stylesheet to reset the body tag field.

<head>
<style type="text/css">
html { overflow: auto; }
html, body, div, iframe { margin: 0px; padding: 0px; height: 100%; border: none; }
iframe { display: block; width: 100%; border: none; overflow-y: auto; overflow-x: hidden; }
</style>
</head>

<body>
<iframe id="myapp" name="myapp" src="https://client.myapp.com" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>
</body>

However, when they include an iframe, the page no longer responds. How can I reproduce the responsiveness of the original webpage when using an iframe (or in any other way that you could suggest)?

+4
3

, :

1:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>body { margin: 0px; } .embed-container { position: relative; padding-bottom: 100%; height: 0; overflow: hidden; max-width: 100%; min-height: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
</head>
<body>
<div class='embed-container'><iframe src='https://client.myapp.com' style='border:0;'></iframe></div>
</body>

2:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
/* Using http://npr.imtqy.com/responsiveiframe/ */
<script src="jquery.responsiveiframe.js"></script>

<script type='text/javascript'>
$(function() {
  $('iframe').responsiveIframe({xdomain: '*'});
});
</script>

<style>
body {
  margin: 0;
}
</style>
</head>

<body>

<iframe src='https://client.myapp.com' style='border:0; width: 100%; height: 100%;'></iframe>

</body>

, (Chrome, Firefox) (Android 4)

+6

-

@media screen and (min-width: 768px) {
  iframe{    
    min-width:768px;
    }
}

@media screen and (min-width: 992px) {
  iframe{ 
    min-width:992px;
    }
}

@media screen and (min-width: 1200px) {
  iframe{    
    min-width:1200px;
    }
}

css.

- iframe .

+2

Make sure you use: <meta name="viewport" content="width=device-width, initial-scale=1.0">in the iframes header.

0
source

Source: https://habr.com/ru/post/1540503/

More articles:


All Articles