现有页面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>