0

我正在尝试使用iFrame Resizer根据其内容（可以更改）在同一域上调整 iFrame 的大小。

现场示例：https ://bronzecc.co.uk/sunday-2nd-xi/

我收到一个Uncaught ReferenceError: iFrameResize is not defined错误，但我检查了 iFrame，它们都通过 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>

无法弄清楚为什么它不起作用。

4

1 回答 1

5

如果您查看您在第一个链接上提供的文档，它会显示本节的用法：

看起来您已经切换了文件包含。iFrame包含(ie )的页面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>

切换它们，看看它是否有效。

于 2019-07-23T23:46:42.017 回答