This article describes the method of JS to prevent web pages from being embedded in iframe framework. Share it for your reference, as follows:
For example:
<script type="text/javascript"> if (window!=top) // Determine whether the current window object is a top object top.location.href = window.location.href; // If not, automatically direct the URL of the top object to the URL that is embedded in the web page</script>
This code is valid. However, there is a problem: after using it, no one can embed your web page into the framework, including yourself.
So, today I am considering whether there is a way to make my web pages only embedded in my own framework, not other people’s frameworks?
On the surface, this question is very simple. Just make a judgment: whether the domain names of the current framework and the top-level framework are the same, and if the answer is no, a URL redirect is done.
if (top.location.hostname != window.location.hostname) { top.location.href = window.location.href;}However, unexpectedly, this writing is wrong and cannot be run at all. Can you see where the mistake is?
Assume that top.location.hostname is www.111.com, and window.location.hostname is www.222.com. That is to say, 111.com embeds 222.com into its web page. At this time, what will happen if you compare top.location.hostname != window.location.hostname?
The browser will prompt a code error!
Because they are cross-domain, the browser's security policy does not allow 222.com's web pages to operate 111.com's web pages, and vice versa. IE calls this error "no permissions". Furthermore, the browser does not even allow you to view top.location.hostname. In cross-domain cases, you will directly report an error as soon as you see this object.
So, how should the code be modified?
In fact, this prompts us to just check whether the top.location.hostname is reported as an error. If an error is reported, it indicates that there is a cross-domain, and the top object will be redirected; if an error is reported, it indicates that there is no cross-domain (or the framework is not used), then no action will be taken.
try{ top.location.hostname;}catch(e){ top.location.href = window.location.href;}This is written correctly and can be run correctly in IE and Firefox. However, Chrome will have an error. For some reason, in cross-domain situations, Chrome does not report an error to top.location.hostname!
There is no way, I can only add another piece of supplementary code for Chrome.
try{ top.location.hostname; if (top.location.hostname != window.location.hostname) { top.location.href = window.location.href; }}catch(e){ top.location.href = window.location.href;}OK, the upgraded version code is completed. Except for local domain names, no other domain names can embed your web page into the framework.
For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript Operation Iframe Skills", "Summary of JavaScript Array Operation Skills", "Summary of JavaScript Mathematical Operation Usage", "Summary of JavaScript Data Structure and Algorithm Skills", "Summary of JavaScript Switching Special Effects and Skills", "Summary of JavaScript Search Algorithm Skills", "Summary of JavaScript Animation Special Effects and Skills", "Summary of JavaScript Errors and Debugging Skills" and "Summary of JavaScript Traversal Algorithm and Skills"
I hope this article will be helpful to everyone's JavaScript programming.