내용에 따라 iframe 크기 조정
저는 iGoogle과 같은 어플리케이션을 만들고 있습니다.다른 애플리케이션(다른 도메인)의 컨텐츠는 iframe 을 사용해 표시됩니다.
iframes 콘텐츠 높이에 맞게 iframes 크기를 조정하려면 어떻게 해야 합니까?
구글이 사용하는 Javascript를 해독하려고 했지만 난독화되어 지금까지 웹 검색은 성과가 없었습니다.
업데이트: 콘텐츠는 다른 도메인에서 로드되므로 동일한 원본 정책이 적용됩니다.
이러한 문제가 있었습니다만, 고객님의 상황과는 약간 반대로, iframed 컨텐츠를 다른 도메인의 사이트에 제공하고 있었기 때문에, 같은 발신기지 정책도 문제가 되었습니다.구글을 탐색하는 데 많은 시간을 소비한 후, 우리는 결국 (어느 정도..)를 발견했다.)실효성이 있는솔루션입니다.필요에 따라 조정할 수 있습니다.
같은 오리진 정책을 회피하는 방법도 있습니다만, iframed 콘텐츠와 프레이밍 페이지 양쪽에서 변경이 필요하기 때문에 양쪽에서 변경을 요구할 수 없는 경우, 이 방법은 그다지 도움이 되지 않습니다.
동일한 원본 정책을 회피할 수 있는 브라우저 기호가 있습니다.javascript는 자체 도메인의 페이지 또는 iframed 페이지와 통신할 수 있지만 프레임이 있는 페이지는 없습니다.예를 들어 다음과 같습니다.
www.foo.com/home.html, which iframes
|-> www.bar.net/framed.html, which iframes
|-> www.foo.com/helper.html
home.html 할 수 있다framed.html및 (iframed)helper.html(일부러)
Communication options for each page:
+-------------------------+-----------+-------------+-------------+
| | home.html | framed.html | helper.html |
+-------------------------+-----------+-------------+-------------+
| www.foo.com/home.html | N/A | YES | YES |
| www.bar.net/framed.html | NO | N/A | YES |
| www.foo.com/helper.html | YES | YES | N/A |
+-------------------------+-----------+-------------+-------------+
framed.html 수 .helper.html(프레임화 되어 있는 경우)는 아니지만 home.html(자녀가 부모와 교차 도메인 통신을 할 수 없습니다).
는 '이것저것'입니다.helper.html에서 메시지를 할 수 .framed.html와도 통신할 수 있습니다.home.html
그러니까 기본적으로는framed.html하중을 받고, 그것은 자신의 높이를 계산한다.helper.htmlhome.html iframe의 크기를 조정할 수framed.html
" " 에서 를 framed.html로로 합니다.helper.htmlURL url url url url 。 위해서는, 「」를 참조해 주세요.framed.html이 src=''★★★★★★★★★★★★★★★★★★★★★★★.onload의 높이를 하고 이 를 "iframe" src로 합니다.helper.html?height=N
여기 facebook이 어떻게 대처하는지에 대한 설명이 있는데, 위의 제 설명보다 조금 더 명확할 수도 있습니다!
코드
»www.foo.com/home.html, 합니다(이 는 임의의 js 파일에서 할 수 ).
<script>
// Resize iframe to full height
function resizeIframe(height)
{
// "+60" is a general rule of thumb to allow for differences in
// IE & and FF height reporting, can be adjusted as required..
document.getElementById('frame_name_here').height = parseInt(height)+60;
}
</script>
<iframe id='frame_name_here' src='http://www.bar.net/framed.html'></iframe>
»www.bar.net/framed.html:
<body onload="iframeResizePipe()">
<iframe id="helpframe" src='' height='0' width='0' frameborder='0'></iframe>
<script type="text/javascript">
function iframeResizePipe()
{
// What's the page height?
var height = document.body.scrollHeight;
// Going to 'pipe' the data to the parent through the helpframe..
var pipe = document.getElementById('helpframe');
// Cachebuster a precaution here to stop browser caching interfering
pipe.src = 'http://www.foo.com/helper.html?height='+height+'&cacheb='+Math.random();
}
</script>
★★의 내용www.foo.com/helper.html:
<html>
<!--
This page is on the same domain as the parent, so can
communicate with it to order the iframe window resizing
to fit the content
-->
<body onload="parentIframeResize()">
<script>
// Tell the parent iframe what height the iframe needs to be
function parentIframeResize()
{
var height = getParam('height');
// This works as our parent's parent is on our domain..
parent.parent.resizeIframe(height);
}
// Helper function, parse param from request string
function getParam( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
</script>
</body>
</html>
다른 도메인의 iframe 콘텐츠를 처리할 필요가 없는 경우, 이 코드를 사용해 보십시오.이 코드를 사용하면 문제가 완전히 해결되어 간단합니다.
<script language="JavaScript">
<!--
function autoResize(id){
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
}
document.getElementById(id).height= (newheight) + "px";
document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>
<iframe src="usagelogs/default.aspx" width="100%" height="200px" id="iframe1" marginheight="0" frameborder="0" onLoad="autoResize('iframe1');"></iframe>
https://developer.mozilla.org/en/DOM/window.postMessage
window.post Message()
window.post Message는 발신기지 간 통신을 안전하게 활성화하는 방법입니다.통상, 다른 페이지의 스크립트는, 스크립트를 실행한 페이지가 같은 프로토콜(통상은 양쪽 모두 http), 포토 번호(80이 http의 디폴트), 및 호스트(양쪽 페이지에 의해서 같은 값으로 설정되는 modulo document.domain)의 로케이션에 있는 경우에만, 서로 액세스 할 수 있습니다.window.post Message는 적절하게 사용했을 때 안전한 방법으로 이 제한을 회피하기 위한 제어 메커니즘을 제공합니다.
요약
window.postMessage를 호출하면 실행되어야 하는 보류 중인 스크립트가 완료되면 MessageEvent가 타깃창으로 디스패치됩니다(예를 들어 window.postMessage가 이벤트핸들러에서 호출되는 경우, 이전에 설정된 보류 타임아웃 등).MessageEvent에는 유형 메시지, window.postMessage에 제공된 첫 번째 인수의 문자열 값으로 설정된 데이터 속성, 창 호출 창의 메인 문서 원본에 대응하는 원본 속성, 시간 창의 postMessage.postMessage가 호출된 창인 소스 속성이 있습니다.ndow.postMessage가 호출됩니다(이벤트의 기타 표준 속성은 예상값과 함께 표시됩니다).
iFrame-Resizer 라이브러리는 콘텐츠에 맞는 크기를 유지하기 위해 postMessage를 사용하고 콘텐츠의 변경을 검출하기 위해 MutationObserver를 사용하며 jQuery에 의존하지 않습니다.
https://github.com/davidjbradshaw/iframe-resizer
jQuery: 도메인 간 스크립팅 기능
http://benalman.com/projects/jquery-postmessage-plugin/
iframe 창 크기 조정 데모 있음...
http://benalman.com/code/projects/jquery-postmessage/examples/iframe/
이 문서에서는 jQuery에 대한 종속성을 제거하는 방법을 보여 줍니다.Plus에는 유용한 정보와 기타 솔루션에 대한 링크가 많이 있습니다.
http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/
베어본 예...
http://onlineaspect.com/uploads/postmessage/parent.html
HTML 5 window.post Message 작업 초안
http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#crossDocumentMessages
크로스 윈도 메시징에 관한 John Resig
http://ejohn.org/blog/cross-window-messaging/
jQuery를 사용하는 가장 간단한 방법:
$("iframe")
.attr({"scrolling": "no", "src":"http://www.someotherlink.com/"})
.load(function() {
$(this).css("height", $(this).contents().height() + "px");
});
에서 iframe으로 다른 .window.postMessage(message, targetOrigin);★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
사이트 A = http://foo.com 사이트 B = http://bar.com
사이트 B가 사이트 A 웹 사이트에 로드 중입니다.
SiteB 웹 사이트에는 이 행이 있습니다.
window.parent.postMessage("Hello From IFrame", "*");
또는
window.parent.postMessage("Hello From IFrame", "http://foo.com");
그러면 사이트 A에는 다음 코드가 있습니다.
// Here "addEventListener" is for standards-compliant web browsers and "attachEvent" is for IE Browsers.
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen to message from child IFrame window
eventer(messageEvent, function (e) {
alert(e.data);
// Do whatever you want to do with the data got from IFrame in Parent form.
}, false);
이 할 수 .eventer(messageEvent, function (e) {})
if (e.origin == 'http://iframe.example.com') {
alert(e.data);
// Do whatever you want to do with the data got from IFrame in Parent form.
}
IE의 경우
내부 IFrame:
window.parent.postMessage('{"key":"value"}','*');
외부:
eventer(messageEvent, function (e) {
var data = jQuery.parseJSON(e.data);
doSomething(data.key);
}, false);
http://www.phinesolutions.com/use-jquery-to-adjust-the-iframe-height.html의 솔루션은 정상적으로 동작합니다(jQuery 사용).
<script type=”text/javascript”>
$(document).ready(function() {
var theFrame = $(”#iFrameToAdjust”, parent.document.body);
theFrame.height($(document.body).height() + 30);
});
</script>
길이에 30을 더해야 하는지는 모르겠지만...1은 나에게 효과가 있었다.
참고로 iFrame에 이미 "높이" 특성이 있다면 style="높이: xxx"만 추가됩니다.이게 네가 원하는 게 아닐 수도 있어.
다른 답변은 모두 더 오래된 답이기 때문에 조금 늦을 수 있습니다:-) 하지만...제 해결책은 이렇습니다.실제 FF, Chrome 및 Safari 5.0에서 테스트 완료.
css:
iframe {border:0; overflow:hidden;}
javascript:
$(document).ready(function(){
$("iframe").load( function () {
var c = (this.contentWindow || this.contentDocument);
if (c.document) d = c.document;
var ih = $(d).outerHeight();
var iw = $(d).outerWidth();
$(this).css({
height: ih,
width: iw
});
});
});
이게 누구에게나 도움이 되길 바라.
이 답변은 부트스트랩을 사용하는 웹사이트에만 적용됩니다.부트스트랩의 응답형 임베드 기능이 작업을 수행합니다.컨텐츠의 너비(높이가 아님)를 기준으로 합니다.
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
</div>
jsfiddle:http://jsfiddle.net/00qggsjj/2/
http://getbootstrap.com/components/ #response-displayed
다음은 iframe 콘텐츠와 동일한 서버에서 제공하는 동적으로 생성된 스타일시트를 사용한 간단한 솔루션입니다.스타일시트는 iframe에 무엇이 있는지 "알고" iframe을 스타일링하기 위해 사용할 치수를 알고 있습니다.이것은, 같은 송신원정책 제한을 회피합니다.
http://www.8degrees.co.nz/2010/06/09/dynamically-resize-an-iframe-depending-on-its-content/
그래서 제공된 iframe 코드에는 다음과 같은 스타일시트가 첨부되어 있습니다.
<link href="http://your.site/path/to/css?contents_id=1234&dom_id=iframe_widget" rel="stylesheet" type="text/css" />
<iframe id="iframe_widget" src="http://your.site/path/to/content?content_id=1234" frameborder="0" width="100%" scrolling="no"></iframe>
이를 위해서는 서버 측 로직이 iframe의 렌더링된 콘텐츠의 치수를 계산할 수 있어야 합니다.
설정 document.domain에 기반한 솔루션을 대체하기 위해 ConroyP의 프레임 인 프레임 솔루션을 구현하고 있지만 다른 브라우저(FF11, Ch17 및 IE9에서 현재 테스트 중)에서 iframe의 콘텐츠 높이를 정확하게 판단하기가 매우 어렵습니다.
ConroyP의 용도:
var height = document.body.scrollHeight;
그러나 그것은 첫 페이지 로드 시에만 작동합니다.내 iframe에는 동적 콘텐츠가 있으며 특정 이벤트에서 iframe 크기를 조정해야 합니다.
결과적으로 브라우저마다 다른 JS 속성을 사용하게 되었습니다.
function getDim () {
var body = document.body,
html = document.documentElement;
var bc = body.clientHeight;
var bo = body.offsetHeight;
var bs = body.scrollHeight;
var hc = html.clientHeight;
var ho = html.offsetHeight;
var hs = html.scrollHeight;
var h = Math.max(bc, bo, bs, hc, hs, ho);
var bd = getBrowserData();
// Select height property to use depending on browser
if (bd.isGecko) {
// FF 11
h = hc;
} else if (bd.isChrome) {
// CH 17
h = hc;
} else if (bd.isIE) {
// IE 9
h = bs;
}
return h;
}
getBrowserData()는 ExtCore의 http://docs.sencha.com/core/source/Ext.html#method-Ext-apply에서 영감을 얻은 브라우저 검출 함수입니다.
그것은 FF와 IE에서는 잘 작동했지만 Chrome에서는 문제가 있었습니다.그 중 하나가 타이밍 문제였는데, iframe의 높이 설정/검출에 Chrome이 시간이 좀 걸린다고 합니다.그리고 크롬은 iframe이 내용물보다 높으면 iframe의 콘텐츠 높이를 제대로 반환하지 않았습니다.높이를 낮추면 동적 콘텐츠에서는 작동하지 않습니다.
이 문제를 해결하기 위해 콘텐츠의 높이를 감지하기 전에 항상 iframe을 낮은 높이로 설정하고 iframe 높이를 올바른 값으로 설정합니다.
function resize () {
// Reset the iframes height to a low value.
// Otherwise Chrome won't detect the content height of the iframe.
setIframeHeight(150);
// Delay getting the dimensions because Chrome needs
// a few moments to get the correct height.
setTimeout("getDimAndResize()", 100);
}
코드는 최적화되어 있지 않습니다.개발 테스트에서 얻은 것입니다.
누군가 도움이 되길 바랍니다!
<html>
<head>
<script>
function frameSize(id){
var frameHeight;
document.getElementById(id).height=0 + "px";
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
}
document.getElementById(id).height= (frameHeight) + "px";
}
</script>
</head>
<body>
<iframe id="frame" src="startframe.html" frameborder="0" marginheight="0" hspace=20 width="100%"
onload="javascript:frameSize('frame');">
<p>This will work, but you need to host it on an http server, you can do it locally. </p>
</body>
</html>
이것은 오래된 이야기지만, 2020년에도 여전히 관련된 질문입니다.이 답변은 다른 오래된 스레드에도 게재되어 있습니다^^(영어)
저의 솔루션과 흥분을 공유하고자 합니다.4일간의 집중적인 연구와 실패가 필요했지만, iframes를 완전히 반응시킬 수 있는 멋진 방법을 찾은 것 같아요!예이!
... 통신 싶지 않았다.postMessage왜냐하면, 같은 타입의 코덱스에서는 곤란하고, 크로스 코덱스에서는 복잡하기 때문입니다(어느 관리자도 당신을 대신해 이것을 도입하고 싶어하지 않기 때문입니다).
MutationObservers를 사용해 보았지만 레이아웃의 모든 변경이 올바르게 처리되도록 하기 위해 여러 EventListener(크기 조정, 클릭, ..)가 필요했습니다.- 스크립트가 요소의 가시성을 전환하면 어떻게 됩니까?또는 더 많은 콘텐츠를 온 디맨드로 동적으로 프리로드하면 어떻게 될까요? - 또 다른 문제는 어딘가에서 iframe 콘텐츠의 정확한 높이를 얻는 것이었습니다.은 사용법을 합니다.scrollHeight ★★★★★★★★★★★★★★★★★」offsetHeightMath.max문제는 iframe 요소가 치수를 변경할 때까지 이러한 값은 갱신되지 않는다는 것입니다. , 「 」를 것만으로 끝납니다.iframe.height = 0손 the the the the 전에scrollHeight더 그러니 집어치워
다음에 또 요.requestAnimationFrame 변경에할 수 할 수 있는 할 수 있는 없었습니다.모든 레이아웃 변경에 즉시 대응할 수 있었지만, iframe의 컨텐츠 높이를 추론할 수 있는 신뢰할 수 있는 출처는 아직 없었습니다. 내가 한 그 getComputedStyle히 이건 이야!건이깨깨깨!모든 게 딱 맞아떨어졌다.
음, 내가 수많은 시도로부터 결국 추출할 수 있는 코드를 봐.
function fit() {
var iframes = document.querySelectorAll("iframe.gh-fit")
for(var id = 0; id < iframes.length; id++) {
var win = iframes[id].contentWindow
var doc = win.document
var html = doc.documentElement
var body = doc.body
var ifrm = iframes[id] // or win.frameElement
if(body) {
body.style.overflowX = "scroll" // scrollbar-jitter fix
body.style.overflowY = "hidden"
}
if(html) {
html.style.overflowX = "scroll" // scrollbar-jitter fix
html.style.overflowY = "hidden"
var style = win.getComputedStyle(html)
ifrm.width = parseInt(style.getPropertyValue("width")) // round value
ifrm.height = parseInt(style.getPropertyValue("height"))
}
}
requestAnimationFrame(fit)
}
addEventListener("load", requestAnimationFrame.bind(this, fit))
에 '네라고 써주세요.- HTML 코드에는 '네'라고 써주세요.<iframe src="page.html" class="gh-fit gh-fullwidth"></iframe> . 。gh-fit는 스크립트에 의해 영향을 받는 DOM 내의 iframe 요소를 식별하기 위해 사용되는 가짜 CSS 클래스입니다.gh-fullwidth의 규칙이 1인 입니다.width: 100%;.
iframe DOM을 ..gh-fit할당된 클래스입니다. 미리 요.document.getComputedStyle(iframe)항상 해당 요소의 픽셀이 정확한 크기를 포함합니다!!!★★★★★★★★★★★★★★★★★★!
주의: 이 솔루션은 크로스 오리진에서는 동작하지 않습니다(IFrameResizer와 같은 쌍방향 통신 전략이 없으면 다른 솔루션도 동작하지 않습니다.JS는 iframe이 사용자의 것이 아닌 경우 단순히 iframe의 DOM에 액세스할 수 없습니다.
제가 생각할 수 있는 유일한 크로스 컨버전스 솔루션은 https://github.com/gnuns/allorigins과 같은 프록시를 사용하는 것입니다.그러나 이 작업에는 모든 요청을 심층 복사하는 작업이 포함됩니다. 즉, 페이지 소스 코드 전체를 '도용'하고(이를 자신의 것으로 만들고 JS가 DOM에 액세스하도록 하기 위해), 이 소스의 모든 링크/경로를 패치하여 프록시를 통과하도록 해야 합니다.재연결 루틴은 어렵지만 실행 가능합니다.
나는 아마도 이 교차 기원 문제를 시도해 볼 것이다. 하지만 그것은 다음 날이다.코드를 즐겨라! :)
iframe 콘텐츠를 제어할 수 있다면,
RizeObserver
하다의 만 하면 됩니다.srcdoc「」의 어트리뷰트iframe필요에 따라 탈출합니다.
<script type="text/javascript">
var ro = new ResizeObserver(entries => {
for (let entry of entries) {
const cr = entry.contentRect;
// console.log(window.frameElement);
window.frameElement.style.height =cr.height +30+ "px";
}
});
ro.observe(document.body);
</script>
iGoogle 가젯은 크기 조정 기능을 적극적으로 구현해야 하기 때문에 교차 도메인 모델에서는 원격 컨텐츠가 어떤 식으로든 참여하지 않으면 이 작업을 수행할 수 없습니다.컨텐츠가 일반적인 교차 도메인 통신 기술을 사용하여 컨테이너 페이지로 새 크기의 메시지를 보낼 수 있는 경우, 나머지는 간단합니다.
iframe 크기에 맞게 웹 페이지를 축소하는 경우:
- 내용에 맞게 iframe 크기를 조정해야 합니다.
- 그런 다음 로드된 웹 페이지 컨텐츠로 전체 iframe을 축소해야 합니다.
다음은 예를 제시하겠습니다.
<div id="wrap">
<IFRAME ID="frame" name="Main" src ="http://www.google.com" />
</div>
<style type="text/css">
#wrap { width: 130px; height: 130px; padding: 0; overflow: hidden; }
#frame { width: 900px; height: 600px; border: 1px solid black; }
#frame { zoom:0.15; -moz-transform:scale(0.15);-moz-transform-origin: 0 0; }
</style>
다음은 iframe의 src 속성을 통해 json에 정보를 추가하는 jQuery 접근법입니다.데모가 있습니다. 이 창의 크기를 조정하고 스크롤합니다.json을 사용한 결과 URL은 다음과 같습니다.http://fiddle.jshell.net/zippyskippy/RJN3G/show/ #{docHeight:5124, windowHeight:1019,scrollHeight:571}#
다음은 소스 코드 fielen http://jsfiddle.net/zippyskippy/RJN3G/ 입니다.
function updateLocation(){
var loc = window.location.href;
window.location.href = loc.replace(/#{.*}#/,"")
+ "#{docHeight:"+$(document).height()
+ ",windowHeight:"+$(window).height()
+ ",scrollHeight:"+$(window).scrollTop()
+"}#";
};
//setInterval(updateLocation,500);
$(window).resize(updateLocation);
$(window).scroll(updateLocation);
iframe 콘텐츠 높이를 가져와 이 iframe에 부여합니다.
var iframes = document.getElementsByTagName("iframe");
for(var i = 0, len = iframes.length; i<len; i++){
window.frames[i].onload = function(_i){
return function(){
iframes[_i].style.height = window.frames[_i].document.body.scrollHeight + "px";
}
}(i);
}
로드 시 jquery 작업(크로스 브라우저):
<iframe src="your_url" marginwidth="0" marginheight="0" scrolling="No" frameborder="0" hspace="0" vspace="0" id="containiframe" onload="loaderIframe();" height="100%" width="100%"></iframe>
function loaderIframe(){
var heightIframe = $('#containiframe').contents().find('body').height();
$('#frame').css("height", heightFrame);
}
응답 페이지의 크기 조정:
$(window).resize(function(){
if($('#containiframe').length !== 0) {
var heightIframe = $('#containiframe').contents().find('body').height();
$('#frame').css("height", heightFrame);
}
});
David Bradshaw와 Chris Jacob은 이미 post Message 접근 방식을 사용할 것을 제안했습니다.그리고 이런 일을 하는 올바른 방법에는 전적으로 동의합니다.
저는 단지 몇몇 사람들에게 해답이 될 수 있는 실제 코드를 게시하고 싶을 뿐입니다.
프레임측:
<body onload="docResizePipe()">
<script>
var v = 0;
const docResizeObserver = new ResizeObserver(() => {
docResizePipe();
});
docResizeObserver.observe(document.querySelector("body"));
function docResizePipe() {
v += 1;
if (v > 5) {
return;
}
var w = document.body.scrollWidth;
var h = document.body.scrollHeight;
window.parent.postMessage([w,h], "*");
}
setInterval(function() {
v -= 1;
if (v < 0) {
v = 0;
}
}, 300);
</script>
재귀 차단 메커니즘에 주목하십시오. Firefox의 버그 때문에 필요했지만, 어쨌든 그대로 두시기 바랍니다.
상위 문서 측:
<iframe id="rpa-frame" src="3.html" style="border: none;"></iframe>
<script>
var rpaFrame = document.getElementById("rpa-frame");
window.addEventListener("message", (event) => {
var width = event.data[0];
var height = event.data[1];
rpaFrame.width = parseInt(width)+60;
rpaFrame.height = parseInt(height)+60;
console.log(event);
}, false);
</script>
유용했으면 좋겠다.
나는 여기서 많은 답을 읽었지만 거의 모든 사람들이 일종의 교차 기원 프레임 블록을 주었다.
오류 예:
수집되지 않은 DOMException:오리진이 "null"인 프레임이 교차 오리진 프레임에 액세스하는 것을 차단했습니다.
관련 스레드의 답변에 대해서도 동일합니다.
스크롤바를 사용하지 않고 내용에 따라 iframe이 자동으로 높이를 조정하도록 합니까?
.iFrame Resizer또는 유사한 라이브러리도 마찬가지입니다.
@ChrisJacob의 답변은 비슷하지만 링크뿐만 아니라 완전한 작업 예시가 누락되어 있습니다.@Selvamani와 @latitov도 좋은 보완책입니다.
https://stackoverflow.com/a/3219970/3850405
하고 width="100%"★★★★★★★★★★★★★★★★의 경우iframe그러나 코드를 너비에 맞게 수정할 수도 있습니다.
설정 .iframe:
★★iframe:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description"
content="Web site" />
<title>Test with embedded iframe</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<iframe id="ifrm" src="https://localhost:44335/package/details?key=123" width="100%"></iframe>
<script type="text/javascript">
window.addEventListener('message', receiveMessage, false);
function receiveMessage(evt) {
console.log("Got message: " + JSON.stringify(evt.data) + " from origin: " + evt.origin);
// Do we trust the sender of this message?
if (evt.origin !== "https://localhost:44335") {
return;
}
if (evt.data.type === "frame-resized") {
document.getElementById("ifrm").style.height = evt.data.value + "px";
}
}
</script>
</body>
</html>
iframe source의예:Create React App 다다 but butHTML ★★★★★★★★★★★★★★★★★」JS용됩니니다다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description"
content="Web site created using create-react-app" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript">
//Don't run unless in an iframe
if (self !== top) {
var rootHeight;
setInterval(function () {
var rootElement = document.getElementById("root");
if (rootElement) {
var currentRootHeight = rootElement.offsetHeight;
//Only send values if height has changed since last time
if (rootHeight !== currentRootHeight) {
//postMessage to set iframe height
window.parent.postMessage({ "type": "frame-resized", "value": currentRootHeight }, '*');
rootHeight = currentRootHeight;
}
}
}
, 1000);
}
</script>
</body>
</html>
에는 with with가 붙어 있습니다.setInterval물론 수정은 가능하지만 다이내믹한 콘텐츠와 잘 어울립니다. setInterval는, 가 「동작」에 있는 하게 됩니다.iframe ★★★★★★★★★★★★★★★★★」postMessage높이가 변경된 경우에만 메시지를 보냅니다.
것은, 을 .Window.postMessage()여기에서는, 델이 달성하고 싶은 것에 매우 적합합니다.
window.postMessage() 메서드는 Window 오브젝트 간(예를 들어 생성된 페이지와 팝업 간 또는 페이지와 iframe에 포함된 페이지와 iframe 간)에 안전하게 크로스 오리진 통신을 가능하게 합니다.
통상, 다른 페이지의 스크립트는, 같은 프로토콜, 포토 번호, 및 호스트(「같은 발신기지 폴리시」라고도 불린다)를 공유하는 경우에 한해, 서로 액세스 할 수 있습니다.window.post Message()는 이 제한을 안전하게 회피하기 위한 제어 메커니즘을 제공합니다(적절하게 사용되는 경우).
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
https://getbootstrap.com/docs/4.0/utilities/embed/
많은 조사 끝에 깨달았습니다.이것은 특별한 문제가 아닙니다.부트스트랩이 처리할 수 있을 것입니다.이것 봐...
jQuery 사용:
parent.parent.displaces 。
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<style>
iframe {
width: 100%;
border: 1px solid black;
}
</style>
<script>
function foo(w, h) {
$("iframe").css({width: w, height: h});
return true; // for debug purposes
}
</script>
<iframe src="child.html"></iframe>
</body>
child.module을 클릭합니다.
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function() {
var w = $("#container").css("width");
var h = $("#container").css("height");
var req = parent.foo(w, h);
console.log(req); // for debug purposes
});
</script>
<style>
body, html {
margin: 0;
}
#container {
width: 500px;
height: 500px;
background-color: red;
}
</style>
<div id="container"></div>
</body>
큰 텍스트와 큰 이미지를 완벽하게 처리할 수 있는 것을 찾을 수 없었습니다만, 저는 결국 매번 이것이 옳거나 거의 맞는 것 같습니다.
iframe.addEventListener("load",function(){
// inlineSize, length, perspectiveOrigin, width
let heightMax = 0;
// this seems to work best with images...
heightMax = Math.max(heightMax,iframe.contentWindow.getComputedStyle(iframe.contentWindow.document.body).perspectiveOrigin.split("px")[0]);
// this seems to work best with text...
heightMax = Math.max(heightMax,iframe.contentWindow.document.body.scrollHeight);
// some large 1920x1080 images always gets a little bit off on firefox =/
const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
if(isFirefox && heightMax >= 900){
// grrr..
heightMax = heightMax + 100;
}
iframe.style.height = heightMax+"px";
//console.log(heightMax);
});
iframe 페이지가 로딩된 시간을 알아야 하기 때문에 조금 까다롭습니다.이것은 콘텐츠를 제어할 수 없을 때는 다릅니다.iframe에 부하 핸들러를 추가하는 것은 가능하지만, 과거에 시도해 본 적이 있습니다만, 브라우저 마다 동작이 크게 다릅니다(누가 가장 귀찮은지는 모릅니다).크기 조정을 수행하는 함수를 iframe 페이지에 추가하고 로드 이벤트를 듣거나 크기 조정 이벤트를 호출하는 일부 스크립트를 컨텐츠에 삽입해야 합니다.안전한지 확인하고 싶기 때문에 페이지에 기능을 추가할 생각입니다만, 얼마나 간단하게 할 수 있을지 모르겠습니다.
이 선에 있는 뭔가가 효과가 있을 것 같아요
parent.document.getElementById(iFrameID).style.height=framedPage.scrollHeight;
iframe 컨텐츠에 본체를 로드한 상태로 로드합니다.
간단한 솔루션이 있어 링크의 폭과 높이를 결정해야 합니다(대부분의 브라우저에서 작동합니다).
<a href='#' onClick=" document.getElementById('myform').src='t2.htm';document.getElementById('myform').width='500px'; document.getElementById('myform').height='400px'; return false">500x400</a>
언급URL : https://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content
'programing' 카테고리의 다른 글
| Vue.js - 다른 컴포넌트에서 메서드를 호출하는 방법 (0) | 2022.09.16 |
|---|---|
| es6 react 컴포넌트가 "export default"에서만 동작하는 이유는 무엇입니까? (0) | 2022.09.16 |
| Tomcat - Catalina_BASE 및 Catalina_HOME 변수 (0) | 2022.09.16 |
| url이 존재하지 않는 경우 file_get_module (0) | 2022.09.16 |
| Django ORM을 사용하여 두 줄의 테이블을 한 줄로 조합할 수 있는 방법이 있습니까? (0) | 2022.09.16 |