наложение div на iframe - PullRequest
Новая
       5

наложение div на iframe

9 голосов
/ 19 января 2010

Я делаю виджет, похожий на виджеты uservoice, за исключением того, что я хочу, чтобы содержимое страницы было в iFrame, а не виджет появлялся через JavaScript. Как я могу иметь полную страницу (ширина / высота 100%) iFrame с div, закрепленным слева от браузера, пример (использующий javascript, а не css / html) здесь:

Я хочу, чтобы этот виджет изначально отображался на странице, а содержимое загружалось через iFrame.

Есть идеи? Я не могу сделать так, чтобы iFrame заполнял всю страницу, а также имел вид сверху. Я играл с z-индексами, не повезло. Пример кода: 

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 

            <style>
            #widget {
                left: 0px;
                position: absolute;
                top: 50%;
                display: block;
                z-index:100001;
                width: 25px;
                }
            #content {
                z-index:1;
                }
            </style>
</head> 
<body> 
    <div id="widget"> 
    widget
    </div>


    <iframe frameborder="0" id="content" src="http://www.google.com/" width="100%" height="100%"></iframe> 
</body> 
</html>

Ответы [ 6 ]

12 голосов
/ 19 января 2010

Если вы не загружаете междоменный домен, вы можете просто загрузить с помощью jquery ajax http://docs.jquery.com/Ajax/load

$(document).ready(function () {
    $("#content").load("page.html");
});

и замените ваш iframe на 

<div id="content"></div>
5 голосов
/ 03 февраля 2010

Это " clickjacking ", не так ли?

Ничто, вероятно, не будет работать в долгосрочной перспективе, так как браузеры (правильно) видят в этом угрозу безопасности, которую нужно предотвратить.

4 голосов
/ 21 января 2010

Возможно, вам нужно добавить поле: auto; на ваш iFrame или плавающий div. Это позволит заполнить экран на 100%.

Пример: 

.width {
   position:absolute;
   left:0;
   right:0;
   top:0;
   bottom:0;
   width:250px;
   height:150px;
   margin:auto;
}

Чтобы исправить это слева от браузера вы можете использовать: 

margin:auto auto auto 0;

Удачи!

1 голос
/ 26 октября 2016

с этим кодом я получаю двойную полосу прокрутки справа справа.Один для веб-сайта и один для i-frame. 

<style>
  iframe {
    position: absolute;
    border: none;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }
</style>
<div>
  <iframe src="http://..."> </iframe> 
</div>
0 голосов
/ 02 декабря 2014

Это сработало для меня:

  • добавить оверлей div с высоким z-индексом и абсолютной позицией
  • сделать фрейм также позиционированным абсолютным
  • добавитьiframe внутри div

div с оверлеем: 

<div style="z-index:99;position:absolute;top:0;right:0">
  ...overlay html...
</div>

iframe: 

<style>
  iframe {
    position: absolute;
    border: none;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }
</style>
<div>
  <iframe src="http://..."> </iframe> 
</div>
0 голосов
/ 02 февраля 2010

Вы можете обернуть свой iframe в div с низким Z-индексом, а затем положить поверх него div с более высоким z-индексом.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...