2013-09-16 2 views
0

URL에서 크기 조절 기능을 활용하기 위해 JS 스크립트를 사용할 수 있습니까?자바 스크립트 화면 크기

<iframe id="myIframe" src="https://media.embed.ly/1/frame?url=http%3A%2F%2Fwww.twitch.tv%2Fgamemode_mc_&amp;width=1280&amp;height=1280&amp;secure=true&amp;key=0202f0ddb5a3458aabf520e5ab790ab9&amp;" 

(여기 내 목표는 내 웹 페이지 배경으로이 트 피드를 배치하는 실제로 - iframe이의 실제 내용이 여기에 실제로 매우 이례적인하지만 추가 치료입니다 크기 조정 방식 때문에 트 위치의 URL 작동합니다!)

JS의 학습에서 매우 빠르며 브라우저 창의 크기를 취하는 초보자 솔루션을 찾고이 URL의 매개 변수를 동적으로 제어하여 콘텐츠의 크기를 제어합니다. 이 iframe에

width=1280&amp;height=1280&amp; 

이 주요 행입니다. 이 측정을 정적이 아닌 뷰포트 크기에 따라 수행해야합니다. 이 작업을 수행하는 가장 좋은 방법은 무엇입니까?

+0

어쨌든 뷰포트 크기가 하드 코딩 된 것처럼 보입니다. 어떻게 변경해야합니까? – Sebas

답변

1

iframe에 프로그래밍 방식으로 src을 설정하고 뷰포트 크기와 같은 변수를 기반으로 src URL을 작성할 수 있습니다.

당신이 뭔가를 시도 할 수 있습니다 : 윈도우 크기를 조정할 때

function loadIframe() { 
    var url = '', 
     viewportWidth = document.documentElement.clientWidth, 
     viewportHeight = document.documentElement.clientHeight; 

    url = 'https://media.embed.ly/1/frame?url=http%3A%2F%2Fwww.twitch.tv%2Fgamemode_mc_&amp;width=' + viewportWidth + '&amp;height=' + viewportHeight + '&amp;secure=true&amp;key=0202f0ddb5a3458aabf520e5ab790ab9&amp;'; 

    document.getElementById('myIframe').src = url; 
} 

그런 다음 당신은 iframe을 다시로드 할 수 있으며, 윈도우가 완료되면로드 :

window.onload = loadIframe; 
window.onresize = loadIframe; 

그러나 나는 실제로 추천 jQuery를 사용하면 브라우저 간 이벤트에보다 쉽게 ​​바인딩 할 수 있습니다.

관련 문제