javascript - 如何从一个html页面获取另一个html页面的内容?

标签 javascript jquery css html iframe

我正在制作一个应用程序,其中包含一些菜单的页眉和页脚将保留在所有页面中。 现在的一种方法是在每个页面中编写页眉和页脚的代码,这是一个糟糕的选择。 另一个选择是使用 iframe,我正在使用它。这是我的代码-

<div style="height:75%;width:98%;">
     <iframe name="someFrame" id="someFrame" frameborder="0" scrolling="yes" width="98%" height="100%"></iframe>
</div>

在此 iframe 中,我调用其他页面的内容。我有一个带有页眉和页脚的主页,中间部分将使用 iframe 进行更改。 为了完美地实现 iframe 的重叠,我使用了下面的 jquery 函数。

<script>
    $("a").click(function(e) {
        e.preventDefault();
        $("#someFrame").attr("src", $(this).attr("href"));
        $("a").removeClass("active");
        $(this).addClass("active");
    })
</script>

现在我需要的是 - 还有其他方法吗?我可以为页眉和页脚制作两个不同的页面,并获取每个页面中的内容吗?使用java??或 ajax 或其他......任何帮助将是值得赞赏的......

最佳答案

index.html

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("demo_test.html",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("External content loaded successfully!");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>

</body>
</html>

demo_test.html

<h1>I am not part of this page</h1>

关于javascript - 如何从一个html页面获取另一个html页面的内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26798325/

相关文章:

c# - 发布到 IIS 后,MVC 无法找到字体文件

javascript - 隐藏 Div onclick 外部

javascript - 禁止 JavaScript 关闭 IE 中的窗口

javascript - jquery 循环中的打字机效果 - 如何

javascript - AJAX使用GET方法加载php文件,加载时但某些jquery插件没有出现

javascript - Jquery 专注于输入字段

jquery - 在嵌套输入字段更改时删除类

javascript - 如何在 javaScript 中获取本地文件名并将其保存为变量以供以后使用?

javascript - AngularJS:当变量变为指令时触发 Controller 函数

javascript - 如何根据行展开和折叠行