神奇的代码——可随意修改复制页面内容

2023-12-20 19:42:48

你见过哪些令你膛目结舌的代码技巧？

你是否遇到下面这样的场景：

  1. 网页设置了不允许复制内容。
  2. 复制需要强制登录帐号才行。
  3. 复制有限制长度。

? ?? ?我们都知道，通过F12可以临时修改网页，但每次都需要找到修改元素的位置才行，不是很方便。

? ?? ?这段代码是用于在网页中以可编辑模式打开原始页面的JavaScript代码。下面是对这段代码的详细介绍和相关知识：

  1. 进入开发者模式：在大多数浏览器中，你可以通过按下F12键或右键单击页面并选择"检查"来进入开发者模式。这将打开一个包含开发者工具的窗口，其中包括控制台、元素查看器等工具。

  2. 进入控制台：在开发者模式下，你可以使用快捷键ctrl+shift+k（Windows/Linux）或cmd+option+i（Mac）来打开控制台。控制台是一个用于执行JavaScript代码的交互式环境。

  3. 输入命令：在控制台中，你可以输入任何有效的JavaScript代码。在这个例子中，我们输入了以下命令：

document.body.contentEditable='true';
-------------------或者
document.designMode='on'

  1. 解释命令：这条命令的作用是将网页的<body>元素的contentEditable属性设置为'true'。这意味着你可以在控制台中直接编辑网页的内容，就像在Word文档中一样。
    document.designMode='on' 是一个JavaScript代码，用于将文档的模式设置为可编辑模式。在可编辑模式下，用户可以对HTML文档进行修改和添加内容。

  2. 退出开发者模式：当你完成编辑后，可以关闭开发者模式并刷新页面。此时，你的更改将不再生效，除非你再次进入开发者模式并重新编辑页面。

? ?? ?需要注意的是，这段代码只能在支持JavaScript的浏览器中运行，并且需要具有足够的权限才能修改网页内容。此外，这种方法可能会被一些网站或浏览器的安全设置所阻止，因此请谨慎使用。

步骤演示：

步骤1、进入开发者模式
? ?? ?点开你需要修改的网站，接着我这里是直接按F12进入的开发者模式。
在这里插入图片描述

步骤2、进入控制台
在这里插入图片描述

步骤3、输入命令并回车
在这里插入图片描述

? ?? ?这时就可以在原页面任意编辑了。
在这里插入图片描述

? ?? ?当然，编写一段简单的HTML和JavaScript代码也可以用于在网页中以可编辑模式打开原始页面：

? ?? ?这段代码定义了一个名为enableEditing的函数。该函数的作用是将网页的<body>元素的contentEditable属性设置为'true'，使页面变为可编辑状态。

? ?? ?在HTML中，contentEditable属性用于控制元素是否可以通过用户输入进行编辑。当contentEditable属性设置为'true'时，用户可以在网页上直接修改内容。

? ?? ?在这段代码中，document.body.contentEditable = 'true';语句将<body>元素的contentEditable属性设置为'true'。这意味着当调用enableEditing()函数时，整个网页都将变为可编辑状态。

? ?? ?你可以将这段代码嵌入到你的网页中，并在需要的时候调用enableEditing()函数来启用编辑功能。

<!DOCTYPE html>
<html>
<head>
  <title>Editable Page</title>
  <script>
    function enableEditing() {
      document.body.contentEditable = 'true';
    }
  </script>
</head>
<body onload="enableEditing()">
  <h1>Welcome to the Editable Page!</h1>
  <p>Click the button below to edit this page.</p>
  <button onclick="enableEditing()">Enable Editing</button>
</body>
</html>

? ?? ?将上述代码保存为一个HTML文件，然后在浏览器中打开该文件。你将看到一个标题、段落和一个按钮。点击按钮后，页面将以可编辑模式打开，你可以直接修改内容。

在JavaScript中，修改网页元素的方法有以下几种：

  1. 通过元素的ID获取元素对象，然后修改其innerHTML属性。
document.getElementById("elementId").innerHTML = "新的内容";
  1. 通过元素的class名获取元素对象，然后修改其innerHTML属性。
var elements = document.getElementsByClassName("className");
for (var i = 0; i < elements.length; i++) {
    elements[i].innerHTML = "新的内容";
}
  1. 通过元素的标签名获取元素对象，然后修改其innerHTML属性。
var elements = document.getElementsByTagName("tagName");
for (var i = 0; i < elements.length; i++) {
    elements[i].innerHTML = "新的内容";
}
  1. 通过CSS选择器获取元素对象，然后修改其innerHTML属性。
var elements = document.querySelectorAll("selector");
for (var i = 0; i < elements.length; i++) {
    elements[i].innerHTML = "新的内容";
}
  1. 通过元素的索引获取元素对象，然后修改其innerHTML属性。
var element = document.getElementsByTagName("tagName")[index];
element.innerHTML = "新的内容";
  1. 通过元素的父节点获取元素对象，然后修改其innerHTML属性。
var parentElement = document.getElementById("parentElementId");
var childElement = parentElement.getElementsByTagName("childElementTagName")[index];
childElement.innerHTML = "新的内容";

文章来源:https://blog.csdn.net/m0_53054984/article/details/135104566
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。