如何打开一个网站让里面的内容是加载另一个网站域名的内容并且看不出来-优雅草央千澈-其次加入禁止右键点击-禁止选择文本和复制以及禁止键盘快捷键
开发背景
如题，今天遇到一个老客户有个问题，他公司购买了别人公司的产品在给客户使用，但是想让他们的客户使用他们的域名访问，因此就是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%
完美解决问题。
