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