|
开发背景 如题，今天遇到一个老客户有个问题，他公司购买了别人公司的产品在给客户使用，但是想让他们的客户使用他们的域名访问，因此就是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>禁止右键代码，禁止复制代码： <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% 完美解决问题。
| 
