Question

我有一个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()函数加载新页面时，都会将变量重新初始化为null。糟糕

Answer 1

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

var message = "Annoying message";

你可以

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

在内页。

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

在此过程中，浏览器经常出现从文档中过滤元素等作为<html>，<title>或<head> 元素。结果，元素由.load（）检索可能不是与文件完全相同由...直接检索浏览器。

Answer 2

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

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

2 个答案: