Tôi đang làm việc trên một ứng dụng giống như iGoogle. Nội dung từ các ứng dụng khác (trên các miền khác) được hiển thị bằng iframe.
Làm cách nào để thay đổi kích thước của iframe để phù hợp với chiều cao của nội dung của iframe?
Tôi đã cố gắng giải mã javascript mà Google sử dụng nhưng nó bị xáo trộn và cho đến nay việc tìm kiếm trên web vẫn không có kết quả.
Cập nhật: Xin lưu ý rằng nội dung được tải từ các tên miền khác, do đó chính sách cùng nguồn gốc được áp dụng.
Câu trả lời:
Chúng tôi đã có loại vấn đề này, nhưng hơi ngược lại với tình huống của bạn - chúng tôi đã cung cấp nội dung có khung cho các trang web trên các tên miền khác, vì vậy chính sách xuất xứ tương tự cũng là một vấn đề. Sau nhiều giờ dành cho việc truy tìm google, cuối cùng chúng tôi cũng tìm thấy một giải pháp khả thi (phần nào đó), mà bạn có thể có thể thích ứng với nhu cầu của mình.
Có một cách xoay quanh cùng một chính sách xuất xứ, nhưng nó yêu cầu thay đổi cả nội dung có khung và trang đóng khung, vì vậy nếu bạn không có khả năng yêu cầu thay đổi ở cả hai bên, phương pháp này sẽ không hữu ích cho bạn, Tôi sợ.
Có một cách giải quyết trình duyệt cho phép chúng tôi tuân theo chính sách xuất xứ tương tự - javascript có thể giao tiếp với các trang trên tên miền của chính nó hoặc với các trang có khung, nhưng không bao giờ có các trang được đóng khung, ví dụ: nếu bạn có:
www.foo.com/home.html, which iframes
|-> www.bar.net/framed.html, which iframes
|-> www.foo.com/helper.htmlsau đó home.htmlcó thể giao tiếp với framed.html(ifazed) và helper.html(cùng tên miền).
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.htmlcó thể gửi tin nhắn đến helper.html(có khung) nhưng không home.html (trẻ em không thể giao tiếp giữa các miền với cha mẹ).
Chìa khóa ở đây là helper.htmlcó thể nhận tin nhắn từ framed.htmlvà cũng có thể liên lạc với home.html.
Vì vậy, về cơ bản, khi framed.htmltải, nó hoạt động theo chiều cao của chính nó helper.html, sẽ truyền thông điệp đến home.html, sau đó có thể thay đổi kích thước iframe nằm trong đó framed.html.
Cách đơn giản nhất mà chúng tôi tìm thấy để chuyển các tin nhắn từ framed.htmlđến helper.htmllà thông qua một đối số URL. Để làm điều này, framed.htmlcó một iframe với src=''chỉ định. Khi onloadkích hoạt, nó đánh giá chiều cao của chính nó và đặt src của iframe tại thời điểm này thànhhelper.html?height=N
Có một lời giải thích ở đây về cách facebook xử lý nó, có thể rõ ràng hơn một chút so với của tôi ở trên!
Trong www.foo.com/home.html, mã javascript sau là bắt buộc (có thể được tải từ tệp .js trên bất kỳ tên miền nào, tình cờ ..):
<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>Trong 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>Nội dung của 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(), tôi đã sử dụng JQuery để bắt cả tải trang và bất kỳ sự kiện thay đổi kích thước nào: $(document).ready(iframeResizePipe); $(window).resize(iframeResizePipe);Điều này cho phép tôi đặt iframe width="100%"và nếu chiều rộng cửa sổ thay đổi để thực hiện bọc văn bản hoặc một cái gì đó, khung bên trong sẽ nhận ra rằng nó cần phải được thay đổi kích thước.
Nếu bạn không cần xử lý nội dung iframe từ một tên miền khác, hãy thử mã này, nó sẽ giải quyết vấn đề hoàn toàn và thật đơn giản:
<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)bạn có và đơn giản hóa mã.
https://developer.mozilla.org/en/DOM/window.postMessage
window.postMessage ()
window.postMessage là một phương thức cho phép giao tiếp nguồn gốc chéo một cách an toàn. Thông thường, các tập lệnh trên các trang khác nhau chỉ được phép truy cập lẫn nhau khi và chỉ khi các trang thực thi chúng ở các vị trí có cùng giao thức (thường là cả http), số cổng (80 là mặc định cho http) và máy chủ (modulo document.domain được đặt bởi cả hai trang có cùng giá trị). window.postMessage cung cấp một cơ chế được kiểm soát để tránh sự hạn chế này theo cách an toàn khi được sử dụng đúng cách.
Tóm lược
window.postMessage, khi được gọi, sẽ khiến MessageEvent được gửi đến ở cửa sổ đích khi bất kỳ tập lệnh đang chờ xử lý nào phải được thực hiện hoàn thành (ví dụ: các trình xử lý sự kiện còn lại nếu window.postMessage được gọi từ trình xử lý sự kiện, thời gian chờ xử lý trước đó, v.v. ). MessageEvent có thông báo kiểu, thuộc tính dữ liệu được đặt thành giá trị chuỗi của đối số đầu tiên được cung cấp cho window.postMessage, một thuộc tính gốc tương ứng với nguồn gốc của tài liệu chính trong cửa sổ gọi window.postMessage tại cửa sổ thời gian. postMessage đã được gọi và một thuộc tính nguồn là cửa sổ mà window.postMessage được gọi. (Các thuộc tính tiêu chuẩn khác của các sự kiện được trình bày với các giá trị dự kiến của chúng.)
Các iFrame-Resizer thư viện sử dụng postMessage để giữ một iFrame có kích thước nội dung của nó, cùng với MutationObserver để phát hiện thay đổi đối với nội dung và không phụ thuộc vào jQuery.
https://github.com/davidjbradshaw/iframe-resizer
jQuery: Tính tốt của kịch bản tên miền chéo
http://benalman.com/projects/jquery-postmessage-plugin/
Có bản demo thay đổi kích thước cửa sổ iframe ...
http://benalman.com/code/projects/jquery-postmessage/examples/iframe/
Bài viết này cho thấy cách loại bỏ sự phụ thuộc vào jQuery ... Plus có rất nhiều thông tin hữu ích và các liên kết đến các giải pháp khác.
http://www.onlineaspect.com/2010/01/15/backwards-compiverse-postmessage/
Ví dụ về barebones ...
http://onlineaspect.com/uploads/postmessage/parent.html
Bản thảo làm việc HTML 5 trên window.postMessage
http://www.whatwg.org/specs/web-apps/civerse-work/multipage/comms.html#crossDocumentMessages
John Resig trên Tin nhắn qua cửa sổ
Cách đơn giản nhất để sử dụng jQuery:
$("iframe")
.attr({"scrolling": "no", "src":"http://www.someotherlink.com/"})
.load(function() {
$(this).css("height", $(this).contents().height() + "px");
});Giải pháp trên http://www.phinesolutions.com/use-jquery-to-adjust-the-iframe-height.html hoạt động rất tốt (sử dụng jQuery):
<script type=”text/javascript”>
$(document).ready(function() {
var theFrame = $(”#iFrameToAdjust”, parent.document.body);
theFrame.height($(document.body).height() + 30);
});
</script>Tôi không biết rằng bạn cần thêm 30 vào chiều dài ... 1 làm việc cho tôi.
FYI : Nếu bạn đã có thuộc tính "height" trên iFrame của mình, điều này chỉ cần thêm style = "height: xxx". Đây có thể không phải là những gì bạn muốn.
có thể hơi muộn, vì tất cả các câu trả lời khác đều cũ hơn :-) nhưng ... đây là giải pháp của tôi. Đã thử nghiệm trong FF, Chrome và Safari 5.0 thực tế.
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
});
});
});Hy vọng điều này sẽ giúp được bất cứ ai.
Cuối cùng tôi tìm thấy một số giải pháp khác để gửi dữ liệu đến trang web mẹ từ iframe bằng cách sử dụng window.postMessage(message, targetOrigin);. Ở đây tôi giải thích tôi đã làm như thế nào.
Trang web A = http://foo.com Trang web B = http://bar.com
SiteB đang tải bên trong trang webA
Trang web SiteB có dòng này
window.parent.postMessage("Hello From IFrame", "*"); hoặc là
window.parent.postMessage("Hello From IFrame", "http://foo.com");Sau đó, trang webA có mã sau đây
// 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); Nếu bạn muốn thêm kết nối bảo mật, bạn có thể sử dụng điều này nếu có điều kiện trong 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.
}Dành cho IE
Bên trong IFrame:
window.parent.postMessage('{"key":"value"}','*');Ở ngoài:
eventer(messageEvent, function (e) {
var data = jQuery.parseJSON(e.data);
doSomething(data.key);
}, false);Đây là một giải pháp đơn giản sử dụng biểu định kiểu được tạo động được cung cấp bởi cùng một máy chủ với nội dung iframe. Khá đơn giản là biểu định kiểu "biết" những gì trong iframe và biết các kích thước sẽ sử dụng để tạo kiểu cho iframe. Điều này được xung quanh các hạn chế chính sách nguồn gốc tương tự.
http://www.8degrees.co.nz/2010/06/09/dynamical-resize-an-iframe-depending-on-its-content/
Vì vậy, mã iframe được cung cấp sẽ có biểu định kiểu đi kèm như vậy ...
<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>
Điều này không yêu cầu logic phía máy chủ có thể tính toán kích thước của nội dung được hiển thị của iframe.
Câu trả lời này chỉ áp dụng cho các trang web sử dụng Bootstrap. Tính năng nhúng đáp ứng của Bootstrap thực hiện công việc. Nó dựa trên chiều rộng (không phải chiều cao) của nội dung.
<!-- 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/
Tôi đang triển khai giải pháp khung trong khung của ConroyP để thay thế một giải pháp dựa trên cài đặt document.domain, nhưng thấy khá khó để xác định chính xác chiều cao của nội dung iframe trong các trình duyệt khác nhau (thử nghiệm với FF11, Ch17 và IE9 ngay bây giờ ).
ConroyP sử dụng:
var height = document.body.scrollHeight;Nhưng điều đó chỉ hoạt động trên tải trang ban đầu. Khung nội tuyến của tôi có nội dung động và tôi cần thay đổi kích thước khung nội tuyến trên các sự kiện nhất định.
Điều cuối cùng tôi làm là sử dụng các thuộc tính JS khác nhau cho các trình duyệt khác nhau.
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 () là chức năng phát hiện trình duyệt "lấy cảm hứng" bởi http://docs.sencha.com/core/source/Ext.html#method-Ext-apply
Điều đó đã làm việc tốt cho FF và IE nhưng sau đó đã có vấn đề với Chrome. Một trong những vấn đề là thời gian, rõ ràng Chrome phải mất một thời gian để thiết lập / phát hiện độ cao của iframe. Và sau đó Chrome cũng không bao giờ trả lại chính xác chiều cao của nội dung trong iframe nếu iframe cao hơn nội dung. Điều này sẽ không hoạt động với nội dung động khi giảm chiều cao.
Để giải quyết vấn đề này, tôi luôn đặt iframe ở độ cao thấp trước khi phát hiện chiều cao của nội dung và sau đó đặt chiều cao iframe thành giá trị chính xác.
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);
}Mã không được tối ưu hóa, đó là từ thử nghiệm phát triển của tôi :)
Hy vọng ai đó tìm thấy điều này hữu ích!
<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>Các tiện ích của iGoogle phải tích cực triển khai thay đổi kích thước, do đó, tôi đoán là trong một mô hình tên miền chéo, bạn không thể thực hiện việc này mà không có nội dung từ xa tham gia theo một cách nào đó. Nếu nội dung của bạn có thể gửi tin nhắn với kích thước mới đến trang container bằng các kỹ thuật giao tiếp tên miền thông thường, thì phần còn lại rất đơn giản.
Khi bạn muốn thu nhỏ một trang web để vừa với kích thước iframe:
Đây là một ví dụ:
<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>Đây là một cách tiếp cận jQuery có thêm thông tin trong json thông qua thuộc tính src của iframe. Đây là bản demo, thay đổi kích thước và cuộn cửa sổ này .. url kết quả với json trông giống như thế này ... http://fiddle.jshell.net/zippyskippy/RJN3G/show/#/ 571} #
Đây là fiddle mã nguồn 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);
}Làm việc với jquery khi tải (trình duyệt chéo):
<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);
} trên thay đổi kích thước trong trang đáp ứng:
$(window).resize(function(){
if($('#containiframe').length !== 0) {
var heightIframe = $('#containiframe').contents().find('body').height();
$('#frame').css("height", heightFrame);
}
});Sử dụng jQuery:
cha mẹ.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>con.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>Điều này hơi khó vì bạn phải biết khi trang iframe được tải, điều này rất khó hiểu khi bạn không kiểm soát nội dung của nó. Có thể thêm trình xử lý tải trọng vào iframe, nhưng tôi đã thử điều này trong quá khứ và nó có hành vi rất khác nhau trên các trình duyệt (không đoán được ai là người khó chịu nhất ...). Bạn có thể phải thêm một chức năng vào trang iframe thực hiện thay đổi kích thước và đưa một số tập lệnh vào nội dung nghe để tải các sự kiện hoặc thay đổi kích thước các sự kiện, sau đó gọi hàm trước đó. Tôi đang suy nghĩ thêm một chức năng vào trang vì bạn muốn đảm bảo an toàn cho nó, nhưng tôi không biết nó sẽ dễ dàng như thế nào.
Một cái gì đó trên dòng này tôi tin rằng nên làm việc.
parent.document.getElementById(iFrameID).style.height=framedPage.scrollHeight;Tải phần này với phần thân của bạn trên tải nội dung iframe.
Tôi có một giải pháp dễ dàng và yêu cầu bạn xác định chiều rộng và chiều cao trong liên kết, vui lòng thử (Nó hoạt động với hầu hết các trình duyệt):
<a href='#' onClick=" document.getElementById('myform').src='t2.htm';document.getElementById('myform').width='500px'; document.getElementById('myform').height='400px'; return false">500x400</a>