İGoogle benzeri bir uygulama üzerinde çalışıyorum. Diğer uygulamalardan (diğer alanlardaki) içerik iframe'ler kullanılarak gösterilir.
İframe'lerin içeriğinin yüksekliğine uyacak şekilde iframe'leri nasıl yeniden boyutlandırabilirim?
Google'ın kullandığı javascript'i deşifre etmeye çalıştım, ancak gizlenmiş ve web'de arama yapmak şimdiye kadar sonuçsuz kaldı.
Güncelleme: İçeriğin diğer alanlardan yüklendiğini ve bu nedenle aynı köken politikasının geçerli olduğunu lütfen unutmayın .
Yanıtlar:
Bu tür bir sorun yaşadık, ancak durumunuzun biraz tersi - iframed içeriği diğer alanlardaki sitelere sağlıyorduk, bu yüzden aynı menşe politikası da bir sorundu. Google'ı trol etmek için saatler geçirdikten sonra, sonunda ihtiyaçlarınıza göre uyarlayabileceğiniz (biraz ..) uygulanabilir bir çözüm bulduk.
Aynı başlangıç politikasının etrafında bir yol var, ancak hem iframed içerikte hem de çerçeveleme sayfasında değişiklik gerektiriyor, bu nedenle her iki tarafta değişiklik isteme yeteneğiniz yoksa, bu yöntem sizin için çok yararlı olmayacak, korkarım.
Aynı köken politikasını doldurmamıza izin veren bir tarayıcı tuhaflığı var - javascript ya kendi alanındaki sayfalarla ya da iframe yaptığı sayfalarla iletişim kurabilir, ancak çerçevelendiği sayfalarla asla iletişim kuramaz, örneğin:
www.foo.com/home.html, which iframes
|-> www.bar.net/framed.html, which iframes
|-> www.foo.com/helper.html
daha sonra (iframed) ve (aynı alan adı) home.htmlile iletişim kurabilir .framed.htmlhelper.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.htmlhelper.html(iframed) 'e mesaj gönderebilir ancak gönderemez home.html (alt alanlarla üst öğe arasında iletişim kuramaz ).
Burada anahtar olmasıdır helper.htmlmesaj alabilen framed.htmlve ayrıca iletişim kurabilir ile home.html.
Bu nedenle, esasen, framed.htmlyüklendiğinde, kendi yüksekliğini çalıştırır, helper.htmlmesajı home.htmliletir, hangi framed.htmloturduğu iframe'i yeniden boyutlandırabilir .
Biz mesaj iletmeyi bulundu basit yolu framed.htmliçin helper.htmlbir URL argüman yoluyla oldu. Bunu yapmak framed.htmliçin src=''belirtilen bir iframe vardır . onloadAteş ettiğinde kendi yüksekliğini değerlendirir ve iframe'in src'sini bu noktadahelper.html?height=N
Burada facebook'un nasıl işlediğine dair bir açıklama var , bu yukarıdaki benimkinden biraz daha açık olabilir!
İçinde www.foo.com/home.html, aşağıdaki javascript kodu gereklidir (bu, herhangi bir etki alanındaki bir .js dosyasından tesadüfen yüklenebilir ..):
<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>
İçinde 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>
İçeriği 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>
parentIframeResize()yükünü aramak için ayarlamak yerine , hem sayfa yükünü hem de yeniden boyutlandırma olaylarını yakalamak için JQuery'yi kullandım: $(document).ready(iframeResizePipe); $(window).resize(iframeResizePipe);Bu, iframe'i ayarlamama width="100%"ve pencere genişliği metin kaydırma veya benzeri bir şey yapmak için değişirse, iç çerçeve yeniden boyutlandırılması gerektiğini fark edecektir.
Farklı bir etki alanından iframe içeriğini işlemeniz gerekmiyorsa, bu kodu deneyin, sorunu tamamen çözecek ve basit olacaktır:
<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>
document.getElementById(id)ve kodu basitleştirmek için öğenin kendisini işleve geçirmek daha uygun olabilir .
https://developer.mozilla.org/en/DOM/window.postMessage
window.postMessage ()
window.postMessage, çapraz kaynak iletişimini güvenli bir şekilde etkinleştirmek için bir yöntemdir. Normalde, farklı sayfalardaki komut dosyalarının yalnızca ve yalnızca onları yürüten sayfalar aynı protokol (genellikle her ikisi de http), bağlantı noktası numarası (80 http için varsayılan değerdir) ve ana bilgisayar (modulo) konumlarındaysa, birbirine erişmesine izin verilir. her iki sayfa tarafından aynı değere ayarlanan domain.domain). window.postMessage, bu kısıtlamanın gerektiği şekilde kullanıldığında güvenli bir şekilde atlatılması için kontrollü bir mekanizma sağlar.
özet
window.postMessage, çağrıldığında, yürütülmesi gereken herhangi bir bekleyen komut dosyası tamamlandığında bir MessageEvent öğesinin gönderilmesine neden olur (örneğin, bir olay işleyicisinden window.postMessage çağrılırsa kalan olay işleyicileri, önceden ayarlanmış bekleyen zaman aşımları vb.). ). MessageEvent, window.postMessage'a sağlanan ilk bağımsız değişkenin dize değerine ayarlanmış bir veri özelliği olan ve time penceresindeki window.postMessage öğesini çağıran ana belgenin kaynağına karşılık gelen bir özgün özellik olan message türüne sahiptir. postMessage çağrıldı ve window.postMessage'ın çağrıldığı pencere olan bir kaynak özelliği. (Olayların diğer standart özellikleri beklenen değerleriyle mevcuttur.)
İFrame-Resizer kütüphanesi ile birlikte iFrame 's içeriğe ölçekli tutmak için postMessage kullanır MutationObserver içeriğinde değişiklik tespit etmek ve jQuery bağlı değildir.
https://github.com/davidjbradshaw/iframe-resizer
jQuery: Web alanları arası komut dosyası oluşturma özelliği
http://benalman.com/projects/jquery-postmessage-plugin/
İframe penceresini yeniden boyutlandırma demosu var ...
http://benalman.com/code/projects/jquery-postmessage/examples/iframe/
Bu makalede, jQuery ... Plus bağımlılığını kaldırmak için nasıl birçok yararlı bilgi ve diğer çözümlere bağlantılar vardır.
http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/
Barebone örneği ...
http://onlineaspect.com/uploads/postmessage/parent.html
Window.postMML üzerinde HTML 5 çalışma taslağı
http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#crossDocumentMessages
Çapraz Pencere Mesajında John Resig
JQuery kullanmanın en basit yolu:
$("iframe")
.attr({"scrolling": "no", "src":"http://www.someotherlink.com/"})
.load(function() {
$(this).css("height", $(this).contents().height() + "px");
});
Http://www.phinesolutions.com/use-jquery-to-adjust-the-iframe-height.html'deki çözüm harika çalışıyor (jQuery kullanır):
<script type=”text/javascript”>
$(document).ready(function() {
var theFrame = $(”#iFrameToAdjust”, parent.document.body);
theFrame.height($(document.body).height() + 30);
});
</script>
Uzunluğa 30 eklemeniz gerektiğini bilmiyorum ... 1 benim için çalıştı.
Bilginize : iFrame'inizde zaten bir "height" özelliği varsa, bu sadece style = "height: xxx" ekler. İstediğiniz bu olmayabilir.
diğer tüm cevaplar eski olduğu için biraz geç olabilir :-) ama ... işte benim çözümüm. Gerçek FF, Chrome ve Safari 5.0'da test edildi.
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
});
});
});
Umarım bu herkese yardımcı olur.
Son olarak iframe kullanarak üst web sitesine veri göndermek için başka bir çözüm buldum window.postMessage(message, targetOrigin);. Burada nasıl yaptığımı açıklıyorum.
Site A = http://foo.com Site B = http://bar.com
SiteB, sitenin içine yükleniyor
SiteB web sitesinde bu satır var
window.parent.postMessage("Hello From IFrame", "*"); veya
window.parent.postMessage("Hello From IFrame", "http://foo.com");Sonra siteA şu kodu içerir
// 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); Güvenlik bağlantısı eklemek istiyorsanız, bunu 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 için
İç IFrame:
window.parent.postMessage('{"key":"value"}','*');Dışarıda:
eventer(messageEvent, function (e) {
var data = jQuery.parseJSON(e.data);
doSomething(data.key);
}, false);İşte iframe içeriğiyle aynı sunucu tarafından sunulan dinamik olarak oluşturulmuş bir stil sayfası kullanan basit bir çözüm. Oldukça basit bir şekilde stil sayfası iframe'de ne olduğunu "bilir" ve iframe'i stilize etmek için kullanılacak boyutları bilir. Bu, aynı menşe politika kısıtlamalarına yol açar.
http://www.8degrees.co.nz/2010/06/09/dynamically-resize-an-iframe-depending-on-its-content/
Bu nedenle, sağlanan iframe kodu, eşlik eden bir stil sayfasına sahip olacaktı ...
<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>
Bu, sunucu tarafı mantığının iframe'in işlenen içeriğinin boyutlarını hesaplayabilmesini gerektirir.
Bu yanıt yalnızca Bootstrap kullanan web siteleri için geçerlidir. Bootstrap'in duyarlı gömme özelliği işi yapar. İçeriğin genişliğine (yüksekliğine değil) dayanmaktadır.
<!-- 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/
Document.domain ayarını temel alan bir çözümü değiştirmek için ConroyP'nin çerçeve içi çözümünü uyguluyorum, ancak farklı tarayıcılarda iframe içeriğinin yüksekliğini doğru bir şekilde belirlemek oldukça zor bulundu (şu anda FF11, Ch17 ve IE9 ile test ediliyor) ).
ConroyP şunları kullanır:
var height = document.body.scrollHeight;Ancak bu yalnızca ilk sayfa yüklemesinde işe yarar. Iframe'im dinamik içeriğe sahip ve iframe'i belirli olaylarda yeniden boyutlandırmam gerekiyor.
Yaptığım şey, farklı tarayıcılar için farklı JS özellikleri kullanmaktı.
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 (), Ext Core'un http://docs.sencha.com/core/source/Ext.html#method-Ext-apply tarafından "ilham" olduğu tarayıcı algılama işlevidir
Bu FF ve IE için iyi çalıştı, ancak daha sonra Chrome ile ilgili sorunlar vardı. Bunlardan biri bir zamanlama sorunuydu, görünüşe göre Chrome'un iframe'in yüksekliğini ayarlamak / tespit etmek biraz zaman alıyor. İframe içerikten daha yüksekse, Chrome ayrıca iframe'deki içeriğin yüksekliğini doğru bir şekilde döndürmedi. Yükseklik azaldığında bu dinamik içerikle çalışmaz.
Bunu çözmek için içeriğin yüksekliğini tespit etmeden önce iframe'i her zaman düşük bir yüksekliğe ayarladım ve sonra iframe yüksekliğini doğru değerine ayarladım.
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);
}Kod optimize edilmedi, benim devel testimden :)
Umarım birisi bunu faydalı bulur!
<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>iGoogle gadget'ları aktif olarak yeniden boyutlandırma uygulamak zorunda olduğundan, tahminim etki alanları arası bir modelde, uzak içerik bir şekilde yer almadan bunu yapamazsınız. İçeriğiniz tipik etki alanları arası iletişim tekniklerini kullanarak kapsayıcı sayfasına yeni boyutta bir ileti gönderebilirse, geri kalanı basittir.
Bir web sayfasını iframe boyutuna sığdırmak için uzaklaştırmak istediğinizde:
İşte bir örnek:
<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>Burada, iframe'in src özniteliği aracılığıyla json'daki bilgileri ekleyen bir jQuery yaklaşımı. Burada demo, yeniden boyutlandırma olduğunu ve bu pencereyi .. Bu ... gibi json görünüyor çıkan url kaydırma http://fiddle.jshell.net/zippyskippy/RJN3G/show/#{docHeight:5124,windowHeight:1019,scrollHeight: 571} #
İşte kaynak kodu keman 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); 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);
}Yükte jquery ile çalışın (çapraz tarayıcı):
<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);
} duyarlı sayfada yeniden boyutlandırıldığında:
$(window).resize(function(){
if($('#containiframe').length !== 0) {
var heightIframe = $('#containiframe').contents().find('body').height();
$('#frame').css("height", heightFrame);
}
});JQuery kullanma:
Parent.html
<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.html
<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>Bu, iframe sayfasının ne zaman yüklendiğini bilmek zorunda olduğunuz için biraz zordur, bu da içeriğinin kontrolünü elinize almadığınız zaman zor olur. İframe'e bir yükleyici işleyicisi eklemek mümkündür, ancak bunu geçmişte denedim ve tarayıcılar arasında çok farklı bir davranışa sahip (kimin en sinir bozucu olduğunu tahmin etmiyorum ...). Büyük olasılıkla, yeniden boyutlandırma gerçekleştiren iframe sayfasına bir işlev eklemeniz ve içeriğe etkinlikleri yüklemeyi veya yeniden boyutlandırmayı dinleyen bir komut dosyası eklemeniz gerekir; bu da önceki işlevi çağırır. Güvenli olduğundan emin olmak istediğiniz için sayfaya bir işlev eklemeyi düşünüyorum, ancak ne kadar kolay olacağını bilmiyorum.
Çalışması gerektiğine inandığım satırlarda bir şey.
parent.document.getElementById(iFrameID).style.height=framedPage.scrollHeight;Bunu, iframe içeriğine vücudunuz yüklenirken yükleyin.
Kolay bir çözümüm var ve bağlantıdaki genişlik ve yüksekliği belirlemenizi gerektirir, lütfen deneyin (Çoğu tarayıcıda çalışır):
<a href='#' onClick=" document.getElementById('myform').src='t2.htm';document.getElementById('myform').width='500px'; document.getElementById('myform').height='400px'; return false">500x400</a>