jQuery 将内容加载到 DIV 并保留父 Javascript答案

【问题标题】：jQuery Load Content into DIV and retain parent JavascriptjQuery 将内容加载到 DIV 并保留父 Javascript
【发布时间】：2021-08-31 22:09:36
【问题描述】：

我正在尝试使用这个

<script>
$(document).ready( function() {
    var data = 'testing'
    $("#about").on("click", function() {
        $("#main-content").load("/about.html");
    });
});
</script>

当我单击“关于”按钮时，它会将 HTML 页面“about.html”加载到名为“main-content”的 div 中。但我有 2 个问题

当它加载时，它会将“about.html”页面加载到整个页面中，而不是仅仅在“main-content”div中
当我加载“about.html”时，我希望能够从主页访问 JavaScript 变量“var data”

这两种可能吗？

【问题讨论】：

请添加相关的HTML。关于 2，您需要将函数外的 var 声明移到脚本的顶层。
您提到了“关于”按钮，但如果它实际上指的是 <a id="about" href="/about.html">About</a>，那么单击它也会导航到 href（除非您特别阻止 jQuery 事件处理程序中的默认行为） .

标签： javascript html jquery

【解决方案1】：

第一个问题：about.html 页面应该实际上只加载到 main-content div 中。也许 css 使 about 页面填满了所有内容。也许代码中还有另一个 javascript 导致了这个问题。浏览器检查器应该可以帮助调试它。

第二个问题：一种可能的方法是将变量内容写入 html，然后再获取它。 jQuery 数据在 html 标签上创建/读取数据属性：

// javascript in current page
var foo = 'testing';
$("#main-content").data('myvar', foo);

// javascript in about.html
var bar = $("#main-content").data('myvar'); // equals 'testing'

【讨论】：

【解决方案2】：

除非 about.html 只是 HTML 和内联 CSS， ifrmae 就是为了这个目的。

<iframe src="about.html" />

【讨论】：