无法更改body元素的html

Unable to change html of body element

本文关键字：元素 html body      更新时间：2023-09-26

我想创建一个bookmarklet，点击时应该替换body标签内的html内容。我已经使用了document.write和document.getElementByTag('body')[0].innerHTML =，但两者都覆盖了head元素内的内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<a href="javascript:document.write('<h1>Hello</h1>');">Click here</a>
<a href="javascript:document.getElementsByTagName('body')[0].innerHTML='<h1>Hello</h1>'">Click here</a>
</body>
</html>

在不删除javascript库的情况下替换body tag html的方法是什么?

哦，这似乎是工作，它看起来像一个难题。

替换整个页面的HTML(包括head元素，库等)使其工作:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<a href="javascript:document.getElementsByTagName('body')[0].innerHTML='<html><head><script src=''a''></script></head><h1>Hello</h1>;return false;'">Click here</a>

</body>
</html>

好吧，这有点棘手，但我相信我弄明白了。基本上我是怎么做的，我去了一个简单的工作书签，在他们的href属性上做了一个decodeURIComponent()，并根据你想做的修改它。

让我知道它是如何为你工作的!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
  <a href="javascript:((function(){var s=document.createElement('script');s.setAttribute('type','text/javascript');s.setAttribute('charset','UTF-8');s.innerHTML = 'document.body.innerHTML = ''<h1>Hello</h1>'''; document.documentElement.appendChild(s);})());">click here</a>
</body>
</html>

使用jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:$('body').html('<h1>Hello</h1>');">Click here</a>

无jQuery方法:

<a href="javascript:document.getElementsByTagName('body').innerHTML = '<h1>Hello</h1>';">Click here</a>

相关文章：