Dynamically load the image path to ensure the relative independence of the Javascript control.

Source: Internet
Author: User
According to the requirements of the New Territories, some images are required to enhance the aesthetics of the date control. Considering that we need to achieve the goal of loading charts and maintain the independence of controls for future transplantation. At that time, there were three ways to consider: 1. Write the path directly in the JS file, but if the reference page path level changes, there would be no difference. 2. Write a class, place it in the CSS file in the topic package, or create a CSS file separately for the date control. However, other elements in the control do not need to use the class. It seems that it is a big question to create a CSS document separately. 3. After the above two methods are excluded, we naturally need to dynamically load the image path. Key Code // Create a global variable save path var imgrooturl = ""; // obtain the directory where the image path is located
VaR strpath=w.doc ument. Location. pathname; // The Directory section after obtaining the host address
VaR thisurlcount = strpath. Split ('/');
VaR hierarchyoffolders = thisurlcount. Length-2; // get the directory level
For (iroot = 0; iroot {
Imgrooturl + = "../";
}
Imgrooturl + = "images/"; // This images can also be set as a parameter. Because all project image folders have fixed names, no parameters are set, but they still save the scalability. After the image is added, the control effect is quite beautiful: The property of the parameter ument. Location: part after document. Location. Hash // # vs window. Location. Hash
Document. Location. host // domain name + port number
Document. Location. hostname // Domain Name
Document. Location. href // complete URL
Document. Location. pathname // directory (Application Program )
Document. Location. Port // port number
Document. Location. Protocol // network protocol (HTTP :)
Document. Location. Search //? Part after

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.