How to use cross-domain web development

This time I will bring you how to use cross-domain web development. What are the precautions for cross-domain use in web development? Here are practical cases, let’s take a look.

In the process of web development, everyone will have contact with cross-domain. Many people do not know what cross-domain is and how to solve cross-domain in web development. The following article will give you a detailed introduction to this. If you are interested, let’s learn about cross-domain and cross-domain solutions.

What is cross-domain?

The concept is as follows: as long as the protocol, domain name, and port are different, they are regarded as different domains

The following is a detailed explanation of the specific cross-domain situation

URL	illustrate	Whether to allow communication
http://www.a.com/a.js, http://www.a.com/b.js	Under the same domain name	allow
http://www.a.com/lab/a.js, http://www.a.com/script/b.js	Different folders under the same domain name	allow
http://www.a.com:8000/a.js, http://www.a.com/b.js	Same domain name, different ports	Not allowed
http://www.a.com/a.js、https://www.a.com/b.js	Same domain name, different protocols	Not allowed
http://www.a.com/a.js, http://70.32.92.74/b.js	Domain name and domain name corresponding ip	Not allowed
http://www.a.com/a.js, http://script.a.com/b.js	The main domain is the same, but the subdomain is different	Not allowed (cookies are not allowed to be accessed in this case)
http://www.a.com/a.js, http://a.com/b.js	Same domain name, different second-level domain names (same as above)	Not allowed (cookies are not allowed to be accessed in this case)
http://www.cnblogs.com/a.js, http://www.a.com/b.js	Different domain names	Not allowed

1. document.domain cross-domain

Principle: For pages under the same main domain name but different subdomain names, you can set document.domain to make them the same domain

Restrictions: Documents in the same domain provide interoperability between pages, and the iframe page needs to be loaded

Pages under the following domain names can be interoperated across domains through document.domain: http://a.com/foo, http://b.a.com/bar, http://c.a.com/bar. However, page interoperation can only be carried out in the form of page nesting. For example, the common iframe method can complete page nesting

// URL http://a.com/foo
var ifr = document.createElement('iframe');
ifr.src = 'http://b.a.com/bar'; 
ifr.onload = function(){
    var ifrdoc = ifr.contentDocument || ifr.contentWindow.document;
    ifrdoc.getElementsById("foo").innerHTML);
};
ifr.style.display = 'none';
document.body.appendChild(ifr);

The URL where the above code is located is http://a.com/foo, and its DOM access to http://b.a.com/bar requires the latter to set document.domain one level higher

// URL http://b.a.com/bar
document.domain = 'a.com'

document.domain can only be set from a subdomain to the main domain. Settings downwards and to other domain names are not allowed. The error given in Chrome is like this

Uncaught DOMException: Failed to set the 'domain' property on 'Document': 'baidu.com' is not a suffix of 'b.a.com'

2. Tags with src

Principle: All HTML tags with the src attribute can be cross-domain, including ,

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills