当前位置：文江博客话题详情

就地替换整个 HTML 文档

发布于 2024-09-01 17:49:17 字数 148 浏览 8 评论 0原文

我试图避免使用数据 URI，因为我不希望生成的文档存储在浏览器的历史记录中。是否可以就地替换整个 HTML 文档？

我尝试了 jQuery("html").html("....")，但是 style 信息无法保留。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

奢欲 2024-09-08 17:49:17

您可能想要这样做：

jQuery("body").html("new content");

...其中 "new content" 理想情况下仅包含通常出现在 body 元素中的标记，而不包含其余部分。这将替换 body 元素的内容，同时保留 head 中的任何内容（例如样式表信息）。如果您还想更新标题，可以通过 document.title = "new title";

编辑我想知道如何替换所有内容在 html 元素内，是否有效，以及会发生什么。所以我这样做了：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
    font-family: sans-serif;
    font-weight: bold;
    color:       blue;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
(function() {
    $(document).ready(pageInit);
    function pageInit() {
        $('#btnChange').live('click', changePage);
        $('#btnHiThere').live('click', sayHi);
    }

    function changePage() {
        $('html').html(
            "<head><\/head>" +
            "<body>" +
            "<input type='button' id='btnHiThere' value='Click for Alert'>" +
            "<p>Note how this text now looks.<\/p>" +
            "<\/body>"
        );
    }

    function sayHi() {
        alert("Hi there");
    }
})();
</script>
</head>
<body>
<input type='button' id='btnHiThere' value='Click for Alert'>
<input type='button' id='btnChange' value='Change Page'>
<p>Note now this text current appears in a sans-serif, bold, blue font.</p>
</body>
</html>

结果非常有趣——我最终得到了一个根本没有 head 或 body 的 DOM 结构，只是 html ，其中包含 head 和 body 的后代。这可能就是新内容中（新）样式混乱的原因。我直接得到本质上相同的结果设置 innerHTML （这可能就是它在 jQuery 中不起作用的原因；jQuery 在可以的时候使用 innerHTML ，尽管它非常复杂，不这样做所以当它不能时）；而如果我通过 document.createElement 和 document.appendChild 显式创建 head 和 body 元素来执行类似的操作，有用。

所有这些几乎肯定意味着这比它的价值更多的努力。

但是：请注意，更改 head 和 body 的内容 元素似乎工作得很好：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
    font-family: sans-serif;
    font-weight: bold;
    color:       blue;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
(function() {
    $(document).ready(pageInit);
    function pageInit() {
        $('#btnChange').live('click', changePage);
        $('#btnHiThere').live('click', sayHi);
    }

    function changePage() {
        $('head').html(
            "<style type='text/css'>\n" +
            "body { color: green; }\n" +
            "<\/style>\n"
        );
        $('body').html(
            "<input type='button' id='btnHiThere' value='Click for Alert'>" +
            "<p>Note how this text now looks.<\/p>"
        );
    }

    function sayHi() {
        alert("Hi there");
    }
})();
</script>
</head>
<body>
<input type='button' id='btnHiThere' value='Click for Alert'>
<input type='button' id='btnChange' value='Change Page'>
<p>Note now this text current appears in a sans-serif, bold, blue font.</p>
</body>
</html>

因此，如果您将要加载的“页面”分离到头部和正文部分，您可以轻松地就地更新它。

You probably want to do this:

jQuery("body").html("new content");

...where "new content" would ideally only include the markup that would normally appear within the body element and not the rest. That will replace the body element's contents, whilst leaving anything you have in head (like style sheet information) alone. If you also want to update the title, you can do that via document.title = "new title";

Edit I got to wondering about replacing everything inside the html element, whether that would work, and what would happen. So I did this:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
    font-family: sans-serif;
    font-weight: bold;
    color:       blue;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
(function() {
    $(document).ready(pageInit);
    function pageInit() {
        $('#btnChange').live('click', changePage);
        $('#btnHiThere').live('click', sayHi);
    }

    function changePage() {
        $('html').html(
            "<head><\/head>" +
            "<body>" +
            "<input type='button' id='btnHiThere' value='Click for Alert'>" +
            "<p>Note how this text now looks.<\/p>" +
            "<\/body>"
        );
    }

    function sayHi() {
        alert("Hi there");
    }
})();
</script>
</head>
<body>
<input type='button' id='btnHiThere' value='Click for Alert'>
<input type='button' id='btnChange' value='Change Page'>
<p>Note now this text current appears in a sans-serif, bold, blue font.</p>
</body>
</html>

And the results were quite interesting — I end up with a DOM structure that doesn't have a head or body at all, just html with the descendants of head and body inside. This is probably what's messing up the (new) styling in the new content. I get essentially the same result setting innerHTML directly (which may be why it doesn't work in jQuery; jQuery uses innerHTML when it can, although it's very sophisticated about not doing so when it can't); whereas if I do something similar by explicitly creating the head and body elements via document.createElement and document.appendChild, it works.

All of which almost certainly means this is more effort than it's worth.

But: Note that changing the content of the head and body elements seems to work just fine:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
    font-family: sans-serif;
    font-weight: bold;
    color:       blue;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
(function() {
    $(document).ready(pageInit);
    function pageInit() {
        $('#btnChange').live('click', changePage);
        $('#btnHiThere').live('click', sayHi);
    }

    function changePage() {
        $('head').html(
            "<style type='text/css'>\n" +
            "body { color: green; }\n" +
            "<\/style>\n"
        );
        $('body').html(
            "<input type='button' id='btnHiThere' value='Click for Alert'>" +
            "<p>Note how this text now looks.<\/p>"
        );
    }

    function sayHi() {
        alert("Hi there");
    }
})();
</script>
</head>
<body>
<input type='button' id='btnHiThere' value='Click for Alert'>
<input type='button' id='btnChange' value='Change Page'>
<p>Note now this text current appears in a sans-serif, bold, blue font.</p>
</body>
</html>

So if you separate the "page" you're loading into head and body parts, you can easily update it in place.

回复收藏 0 原文

倾城花音 2024-09-08 17:49:17

没有jquery：

var newString = [
      "<!doctype html>"
    , "<html>"
    , "<head>"
    , "</head>"
    , "<body>"
    , "<h1>new content</h1>"
    , "</body>"
    , "</html>"
].join("");

document.getElementById('myIframeId').contentDocument.documentElement.outerHTML = newString;

No jquery:

var newString = [
      "<!doctype html>"
    , "<html>"
    , "<head>"
    , "</head>"
    , "<body>"
    , "<h1>new content</h1>"
    , "</body>"
    , "</html>"
].join("");

document.getElementById('myIframeId').contentDocument.documentElement.outerHTML = newString;

回复收藏 0 原文

~没有更多了~