现有页面demo1, 代码如下:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <button class="btn">点我加载</button><br>
    <iframe id="iframe" src="" frameborder="1"></iframe>
</body>
</html>
<script>
    $(function () {
        $('.btn').on('click', function () {
            $('#iframe').attr('src', '/demo2.html');
        });
    });
</script>

点击demo1下的“点我加载”按钮,将demo2页面嵌入iframe中,demo2页面代码如下:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo2</title>
</head>
<body>
    <button class="redirect">百度一下</button>
</body>
</html>
<script>
$(function () {
    $('.redirect').on('click', function () {
        window.location.href = 'http://www.baidu.com';
    });
});
</script>

demo2页面中,假如要写自己的jquery逻辑,如果不再次在demo2中引入jquery包,报错如下:


demo2.html:17 Uncaught ReferenceError: $ is not defined

解决方案:

在使用jquery之前,加上如下代码:


if (typeof(jQuery) == "undefined") {
    var iframeBody = document.getElementsByTagName("body")[0];
    var jQuery = function (selector) { return parent.jQuery(selector, iframeBody); };
    var $ = jQuery;
}

最终,demo2完整代码如下:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo2</title>
</head>
<body>
    <button class="redirect">百度一下</button>
</body>
</html>
<script>
if (typeof(jQuery) == "undefined") {
    var iframeBody = document.getElementsByTagName("body")[0];
    var jQuery = function (selector) { return parent.jQuery(selector, iframeBody); };
    var $ = jQuery;
}
$(function () {
    $('.redirect').on('click', function () {
        window.location.href = 'http://www.baidu.com';
    });
});
</script>