使用David Bradshaw的iFrameResize

Question

我在问如何使用David Bradshaw的iframe调整器的帮助？我打算在博客上使用它，因为我使用iframe来显示跨域内容，我希望iframe根据其内容的大小来调整大小。

这里就是我做我的博客博客模板，我已经添加了这上面</body>标签：

<script type='text/javascript'> 
    $('iframe').iFrameSizer({ 
// Disable if using size method with custom dimensions. 
autoResize    : true, 

// Override the body background style in the iFrame. 
bodyBackground   : null, 

// Override the default body margin style in the iFrame. 
// A string can be any valid value for the CSS margin attribute, 
// for example '8px 3em'. A number value is converted into px. 
bodyMargin    : null, 
bodyMarginV1    : 8, 
bodyPadding    : null, 

// When set to true, only allow incoming messages from the domain 
// listed in the src property of the iFrame tag. If your iFrame 
// navigates between different domains, ports or protocols; 
// then you will need to disable this option. 
checkOrigin    : true, 

// If enabled, a window.parentIFrame object is created in the iFrame 
// that contains methods outlined 
enablePublicMethods  : false, 

// 'bodyOffset' | 'body<a href="http://www.jqueryscript.net/tags.php?/Scroll/">Scroll</a>' | 'documentElementOffset' | 'documentElementScroll' | 
// 'max' | 'min' | 'grow' | 'lowestElement' 
heightCalculationMethod : 'offset', 

// The default value is equal to two frame refreshes at 60Hz 
interval     : 32, 

// Setting the log option to true will make the scripts in both the host page 
// and the iFrame output everything they do to the JavaScript console 
// so you can see the communication between the two scripts. 
log      : false, 

// Set maximum height/width of iFrame. 
maxHeight     : Infinity, 
maxWidth     : Infinity, 

// Set minimum height/width of iFrame. 
minHeight     : 0, 
minWidth     : 0, 

// Enable scroll bars in iFrame. 
scrolling     : false, 

// Resize iFrame to content height. 
sizeHeight    : true, 

// Resize iFrame to content width. 
sizeWidth     : false, 

// Set the number of pixels the iFrame content size has to change by, 
// before triggering resize of the iFrame. 
tolerance     : 0, 

// Called when iFrame is closed via parentIFrame.close() method. 
closedCallback   : function(){}, 

// Initial setup callback function. 
initCallback    : function(){}, 

// Receive message posted from iFrame with the parentIFrame.sendMessage() method. 
messageCallback   : function(){}, 

// Function called after iFrame resized. 
resizedCallback   : function(){}, 

// Called before the page is repositioned after a request from the iFrame 
scrollCallback   : function(){return true;} 
}); 
</script> 
    <script src='http://javascript.ext/system/iframeResizer.min.js' type='text/javascript'/> 

我也添加了这个上面我的跨域页的</body>标签：

<script type="text/javascript" src="./system/iframeResizer.contentWindow.min.js"></script> 
<script src="./system/jquery.js"></script> 

但没有任何反应，iframe不是自动调整大小:(任何人都可以帮我吗？

Answer 1

您需要在博客页面中切换脚本的顺序。需要iframeResizer.min.js来设置iframe，因此它需要首先。

此外，似乎与调用错字。它应该是：

$('iframe').iFrameResize({ /* options */ }); 

这只适用于你的页面上有jQuery的情况。如果没有它，你应该能够设置你的iframe这样的：

iFrameResize({ /* options */ }, 'iframe'); 

哪里iframe是CSS选择器。