Получить размер встроенного фрейма - PullRequest
Новая
       2

Получить размер встроенного фрейма

0 голосов
/ 22 мая 2018

У меня есть встроенный src iframe: 

let src = `data:text/html;charset=UTF-8,<html>
    <body>
      <p>Content</p>
    </body>
  </html>`

Когда страница загружена, я создаю и добавляю iframe в тело страницы: 

let iframe = document.createElement("iframe")
document.querySelector('body').appendChild(iframe)

Затем я устанавливаю srcна iframe: 

iframe.setAttribute('src', src)

Как взять ширину и высоту отрисовки в содержимом iframe и установить ширину и высоту iframe и каков наилучший способ сделать это (с помощью JS или, возможно, с помощью CSS)

Ответы [ 2 ]

0 голосов
/ 22 мая 2018

Я использую about:blank в качестве src, чтобы вы могли легко получить доступ к iframe со страницы, не сталкиваясь с «той же политикой происхождения» выпусков 

let html = `<p>Content</p>`;

let iframe = document.createElement("iframe")
document.body.appendChild(iframe);    

iframe.src = 'about:blank';

iframe.onload = function(){
  let win = this.contentWindow; 
  win.document.write(html);  
  console.log('inner width of iframe window=', win.innerWidth);  
}

JSFiddle DEMO

0 голосов
/ 22 мая 2018

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

Самый простой способчтобы достичь этого, вероятно, с помощью jQuery 

$(function(){
  
  $('#changed').css({'height': $('#whatfrom').height(), 'width': $('#whatfrom').width()});  

});
#changed {
   height: 50px;
   width: 50px;
   outline: 1px solid red;
}

#whatfrom {
   margin-top: 10px;
   height: 150px;
   width: 100px;
   outline: 1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="changed">I'll take width and height of the div below me</div>
<div id="whatfrom">Watch.. the element above will take my width and height. What a copycat!</div>

, очевидно, измените #changed и #whatfrom деления на все, что вам нужно

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

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

...