如何访问动态加载的 html 页面中的 javascript 变量？答案

【问题标题】：How to access javascript variables in dynamically-loaded html page?如何访问动态加载的 html 页面中的 javascript 变量？
【发布时间】：2011-05-22 16:58:48
【问题描述】：

我有一个 html 页面，它通过 Ajax 将另一个 html 页面加载到它的一个 div 中。比如：

基础html页面：

<html>
  <head>
    <script type='text/javascript'>
      var greeting = "Hello";
    </script>
  </head>
  <body>  
    <div id="details-main-content">
    </div>
  </body>
</html>

加载到上述页面的页面（使用 django 模板，因此放置在 'head' 块中的任何内容最终都会出现在基本页面的 'head' 标记中）：

{% block head %}
  <script type="text/javascript" language="javascript">
    alert("Greeting: " + greeting);
  </script>
{% endblock %}
<div>
  Hello, world!
</div>

当一个按钮被点击时，子内容被加载，通过一个Javascript函数（使用JQuery），例如：

function loadContent(url) {
    // Load external content via AJAX. 
    $( '.details-main-content' ).load( "/foo.html", function(){        
    });
}

页面加载正确，子内容在模板页面内完全显示。

是否可以从内页访问基页中的 JS 变量（因为内页嵌套在外页内部）？

非常感谢任何帮助。

谢谢

编辑：

我认为我遇到的问题是由于在基本 html 页面中有以下行：

var gender = null;
var age = null;

每次通过load() 函数加载新页面时，都会将变量重新初始化为空。哎呀

【问题讨论】：

标签： javascript jquery variables django-templates

【解决方案1】：

是的。它只是一个页面，在加载之前和之后（使用 XMLHttpRequest）。举个简单的例子，如果你有：

var message = "Annoying message";

你可以有

<a href="#" onclick="alert(message);">Message</a>

在内页中。

编辑：如果您遇到问题，可能是由于 jQuery load 文档中提到的问题：

在这个过程中，浏览器经常从文档中过滤元素，例如如<html>、<title> 或<head> 元素。结果，元素 .load() 检索到的可能不是与文档完全相同被直接取回浏览器。

【讨论】：

我可以从内页设置外页定义的变量吗？我昨晚正在尝试这个，但它似乎对我不起作用。
感谢您的帮助。我想我已经解决了我遇到的问题 - 请参阅原始帖子中的编辑。

【解决方案2】：

您的示例中没有“内部”和“外部”页面。您只需使用单个页面，其中的某些内容是动态加载的，但浏览器不会对它有任何不同的处理。

【讨论】：