iFrameResize未通过CDN & in JS文件定义加载
iFrameResize未通过CDN & in JS文件定义加载
提问于 2019-07-23 23:13:04
我试图利用iFrame Resizer来根据iFrame的内容(这是可以改变的)调整它在同一个域上的大小。
实例：https://bronzecc.co.uk/sunday-2nd-xi/
我得到了一个Uncaught ReferenceError: iFrameResize is not defined错误，但是我检查了iFrames，他们都通过CDN加载了正确的JS，我还在页面本身加载了正确的JS。
用于初始化我正在使用的大小
var iframes = iFrameResize({log: true}, 'iframe');MCE：https://gist.github.com/shivampaw/7b1dba5326706673a782d115358eca2a
window.html
<html>
<head>
<meta charset="UTF-8">
<title>Window</title>
</head>
<body>
<iframe src="iframe.html" style="width: 100%;" frameborder="0"></iframe>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.1.1/iframeResizer.contentWindow.min.js"></script>
<script>
iframes = iFrameResize({}, 'iframe');
</script>
</body>
</html>iframe.html
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<title>102166</title>
</head>
<body>
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th></th>
<th>Match Time</th>
<th>Match Type</th>
<th>Home Team</th>
<th>Away Team</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#details_3722786">
<td><i class="fa fa-plus" aria-hidden="true"></i></td>
<td>28/07/2019 14:00</td>
<td>League</td>
<td>Bronze CC</td>
<td>Wall CC</td>
</tr>
<tr class="collapse" id="details_3722786">
<td colspan="5" style="text-align: center;">
<p>
Ground: The Anson Ground B43 7BA<br />
Start Time: 14:00 </p>
</td>
</tr>
<tr data-toggle="collapse" data-target="#details_3722741">
<td><i class="fa fa-plus" aria-hidden="true"></i></td>
<td>04/08/2019 14:00</td>
<td>League</td>
<td>Burntwood St Matthew's CC</td>
<td>Bronze CC</td>
</tr>
<tr class="collapse" id="details_3722741">
<td colspan="5" style="text-align: center;">
<p>
Ground: The Riddings<br />
Start Time: 14:00 </p>
</td>
</tr>
<tr data-toggle="collapse" data-target="#details_3722745">
<td><i class="fa fa-plus" aria-hidden="true"></i></td>
<td>11/08/2019 14:00</td>
<td>League</td>
<td>Four Oaks Saints CC</td>
<td>Bronze CC</td>
</tr>
<tr class="collapse" id="details_3722745">
<td colspan="5" style="text-align: center;">
<p>
Ground: Coalville, Clarence Road, Four Oaks, Sutton Coldfield<br />
Start Time: 14:00 </p>
</td>
</tr>
<tr data-toggle="collapse" data-target="#details_3722710">
<td><i class="fa fa-plus" aria-hidden="true"></i></td>
<td>18/08/2019 14:00</td>
<td>League</td>
<td>Bronze CC</td>
<td>Wall CC</td>
</tr>
<tr class="collapse" id="details_3722710">
<td colspan="5" style="text-align: center;">
<p>
Ground: The Anson Ground B43 7BA<br />
Start Time: 14:00 </p>
</td>
</tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.1.1/iframeResizer.min.js"></script>
</body>
</html>不知道为什么不起作用。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-07-23 23:46:42
如果您查看第一个链接上提供的文档，它将显示本节介绍使用情况。
看起来你已经切换了文件。保存iFrame的页面(即window.html)应该包含脚本iframeResizer.min.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.1.1/iframeResizer.min.js"></script>另一个页面是iFrame的内容(即iframe.html)，它应该包含另一个脚本：
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.1.1/iframeResizer.contentWindow.min.js"></script>把它们转过来，看看它是否有效。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57173292
复制相关文章
相似问题
腾讯云开发者
