如何打开一个网站让里面的内容是加载另一个网站域名的内容并且看不出来-优雅草央千澈-其次加入禁止右键点击-禁止选择文本和复制以及禁止键盘快捷键

本文涉及的产品
.cn 域名,1个 12个月
简介: 如何打开一个网站让里面的内容是加载另一个网站域名的内容并且看不出来-优雅草央千澈-其次加入禁止右键点击-禁止选择文本和复制以及禁止键盘快捷键

如何打开一个网站让里面的内容是加载另一个网站域名的内容并且看不出来-优雅草央千澈-其次加入禁止右键点击-禁止选择文本和复制以及禁止键盘快捷键

开发背景

如题,今天遇到一个老客户有个问题,他公司购买了别人公司的产品在给客户使用,但是想让他们的客户使用他们的域名访问,因此就是A网站中其实加载B内容,B内容不可被下载,不可右键点击查看即可,整个需求一分析,JavaScript脚本就可以做到啦,html中套iframe框架。

实战安排

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加载另一个网站内容</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        iframe {
            width: 80%;
            height: 80%;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <iframe src="https://www.example.com" title="网站内容"></iframe>
</body>
</html>

在这个代码中,我们创建了一个简单的 HTML 页面,并使用 iframe 标签来加载 https://www.example.com 的内容。可以将 src 属性中的网址替换为希望加载的网站地址。

我用test3.youyacao.com来做测试,里面的内容加载“https://single.web.daxpay.cn/login”内容,当然了 这个开源项目demo地址也只是我用来做示范的。

禁止右键代码,禁止复制代码:

<script> document.addEventListener('contextmenu', event => event.preventDefault()); </script>

禁止使用快捷键Ctrl+S、Ctrl+U、Ctrl+P的代码

<script> document.addEventListener('keydown', function(event) { if (event.ctrlKey && (event.key === 's' || event.key === 'u' || event.key === 'p')) { event.preventDefault(); } });

我再加一个禁止使用f12(审查元素)快捷键的代码,针对程序员肯定无效,针对普通用户绰绰有余拉。

<script> document.addEventListener('keydown', function(event) { // 禁止F12 if (event.key === 'F12') { event.preventDefault(); } // 禁止Ctrl+Shift+I if (event.ctrlKey && event.shiftKey && event.key === 'I') { event.preventDefault(); } // 禁止Ctrl+Shift+J if (event.ctrlKey && event.shiftKey && event.key === 'J') { event.preventDefault(); } // 禁止Ctrl+U if (event.ctrlKey && event.key === 'U') { event.preventDefault(); } }); </script>

因此我们的最终完整代码为:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>钱包网站测试-demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        iframe {
            width: 80%;
            height: 80%;
            border: 1px solid #ccc;
        }
    </style>
    <script> document.addEventListener('keydown', function(event) { // 禁止F12 if (event.key === 'F12') { event.preventDefault(); } // 禁止Ctrl+Shift+I if (event.ctrlKey && event.shiftKey && event.key === 'I') { event.preventDefault(); } // 禁止Ctrl+Shift+J if (event.ctrlKey && event.shiftKey && event.key === 'J') { event.preventDefault(); } // 禁止Ctrl+U if (event.ctrlKey && event.key === 'U') { event.preventDefault(); } }); </script>
    <script> document.addEventListener('contextmenu', event => event.preventDefault()); </script>
    <script>
    document.addEventListener('keydown', function(event) {
        if (event.ctrlKey && (event.key === 's' || event.key === 'u' || event.key === 'p')) {
            event.preventDefault();
        }
    });
      </script>
</head>
<body>
    <iframe src="https://single.web.daxpay.cn" title="钱包网站测试-demo"></iframe>
</body>
</html>

达到要求,不过宽高有点问题,因此我调整下, width: 80%; height: 80%;改成100%

完美解决问题。

目录
打赏
0
22
22
3
178
分享
相关文章
在Linux中,想在命令行下访问某个网站,并且该网站域名还没有解析,如何做?
在Linux中,想在命令行下访问某个网站,并且该网站域名还没有解析,如何做?
本文介绍了十个重要的网络技术术语,包括IP地址、子网掩码、域名系统(DNS)、防火墙、虚拟专用网络(VPN)、路由器、交换机、超文本传输协议(HTTP)、传输控制协议/网际协议(TCP/IP)和云计算
本文介绍了十个重要的网络技术术语,包括IP地址、子网掩码、域名系统(DNS)、防火墙、虚拟专用网络(VPN)、路由器、交换机、超文本传输协议(HTTP)、传输控制协议/网际协议(TCP/IP)和云计算。通过这些术语的详细解释,帮助读者更好地理解和应用网络技术,应对数字化时代的挑战和机遇。
152 3
如何使用阿里云虚拟主机和域名设置网站?
如何使用阿里云虚拟主机和域名设置网站?
基于Ubuntu-22.04安装K8s-v1.28.2实验(四)使用域名访问网站应用
基于Ubuntu-22.04安装K8s-v1.28.2实验(四)使用域名访问网站应用
64 1
分享|【红猫网】备案域名的二级分发:实现网站可迁移、流量分流、备份归档
本文介绍了如何利用备案域名的二级分发技术实现网站迁移、流量分流和备份归档。通过为主域名下的子域名设置独立解析记录,实现资源的灵活分配与管理,确保网站服务的稳定性和高效性。同时,文章还解答了关于备案、SEO优化及HTTPS支持的相关问题。
108 0
Windows系统云服务器自定义域名解析导致网站无法访问怎么解决?
Windows系统云服务器自定义域名解析导致网站无法访问怎么解决?
阿里云域名注册、续费收费标准价格表及最新优惠口令获取及使用教程参考
阿里云域名注册和续费收费标准在9月份随着全球域名价格的上涨,域名收费标准也做了调整,目前阿里云的.com英文域名的注册价格为83元,续费收费标准为90元,为了让更多用户在注册和续费时价格能更加实惠,阿里云推出了域名优惠口令活动,域名优惠口令适合在域名注册和续费时使用,使用优惠口令通常可以使注册和续费价格减免几元到十几元不等,例如使用优惠口令续费.com域名就可减少5元。本文为大家展示目前阿里云域名注册和续费的最新收费标准以及如何领取和使用域名优惠口令的相关教程,以供参考。
566 11

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等