Shulou(Shulou.com)06/01 Report--

What are the knowledge points of this article "what are the cross-domain methods of iframe in the front end of web?" most people do not understand, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what are the methods of iframe cross-domain in the front end of web?"

Why cross-domain

In order to ensure the security of user information, in 1995, Netscape introduced the same origin strategy, in which the same origin refers to three identical: protocol, domain name, port.

If you violate the same origin policy, there will be cross-domain problems, mainly in the following three aspects:

Unable to read cookie, localStorage, indexDB

DOM is not available

Ajax request could not be sent

Scene

Recently, I am doing a requirement that I need to introduce something similar to a video player packaged by others in iframe. There is a full-screen button in iframe. After clicking, you need to make the page full-screen for iframe. Due to the limitation of the same origin policy, iframe cannot tell the page to full-screen.

Solution.

Set up domain

The function of document.domain is to get / set the original domain part of the current document, and the same origin policy determines whether the original domain of two documents is the same or not. This means that the cross-domain problem can be solved simply by setting this value to the same value.

Here, I set domain as the value of the first-level domain name, and page a url as a.demo.comjol a page url referenced by iframe in page b is b.demo.com, specifically set as follows:

Document.domain = 'demo.com'

After setting up, mount the method to make the iframe full screen on the window of page a:

/ / a page window.toggleFullScreen = () = > {/ / do something}

On the b page, you can directly get the window object of page an and call:

/ / b page window.parent.toggleFullScreen ()

However, there are certain restrictions on the setting of this value, which can only be set to the upper-level field of the current document or a value consistent with the domain of the URL of the document. If url is a.demo.com, then domain can only be set to demo.com or a.demo.com. Therefore, the method of setting up domain can only be used to solve situations where the primary domain is the same but the subdomain is different.

Use the middle page

We can also use a c page with the same domain name but different route as the middle page, b page loads c page, c page calls a page, thus realizing the method of b page calling a page. The specific operations are as follows:

A new route is opened in the node layer of page a, which loads a c page as an intermediate page, and the url of c page is a.demo.com/c. The c page is just a simple html page, and the method of page an is called on the onload event of window.

_ window.onload = function () {parent.parent.toggleFullScreen ();}

Because c pages and a pages are in line with the same origin policy, you can avoid cross-domain problems and implement a full-screen approach.

Postmessage

The window.postMessage method can securely realize cross-source communication, and messages can be sent to it by writing down the protocol, host address or port of the target window.

/ / b page parent.postMessage (value, "http://a.demo.com");// a page window.addEventListener (" message ", function (event) {if (event.origin! = = 'http://b.demo.com') return; toggleFullScreen ()}))

For the sake of security, after receiving the message, check the event.origin to determine whether to receive the message from the window.

The above is about the content of this article on "what are the cross-domain methods of iframe in the front end of web?" I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.