CN112230918B - Web end development method using iframe embedded webpage - Google Patents
Web end development method using iframe embedded webpage Download PDFInfo
- Publication number
- CN112230918B CN112230918B CN202011104518.1A CN202011104518A CN112230918B CN 112230918 B CN112230918 B CN 112230918B CN 202011104518 A CN202011104518 A CN 202011104518A CN 112230918 B CN112230918 B CN 112230918B
- Authority
- CN
- China
- Prior art keywords
- sub
- project
- directory
- compiling
- command
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
- G06F8/65—Updates
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Security & Cryptography (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
Abstract
The invention discloses a web end development method using an iframe embedded webpage, which comprises the following steps: dividing the configuration files into a main directory configuration file and a sub-project configuration file and respectively configuring; when a command in the main directory configuration file is operated, a local http service is firstly created, and then all sub-project directories and configuration files under the sub-project directories are obtained; respectively executing the compiling command in the configuration file, setting an output directory and opening a main directory in a browser; setting code hot update service, monitoring the modification of code file, and recompiling and updating output file when monitoring the code modification. The method of the invention effectively solves the problem that the project embedded in the front-end iframe can not be compiled and run simultaneously by adopting the method of compiling and running a plurality of projects by using the webpack, so that the project is more convenient and faster in the development process, thereby saving the time cost.
Description
Technical Field
The invention relates to the technical field of designing a computer technology front end, in particular to a web end development method using an iframe embedded webpage.
Background
In web end development, generally, iframe is used to embed a page with complex functions and running stably into a new page, or in development, function modules with complex functions and using different technologies need to be developed independently and embedded into other pages, iframe embedding is also needed, but development difficulty is increased, for a framework using front-end modular development, an introduced page cannot be developed and compiled simultaneously by the current scheme, and multiple required projects are developed and run separately. The main project and the sub projects are separately compiled in the front-end project which needs to embed iframes into sub project pages, and then the main project is introduced into the packaged sub projects to check the page effect.
Disclosure of Invention
The invention aims to overcome the defects in the background technology, and provides a web end development method using an iframe embedded webpage, which aims at the problem that when an iframe embedded page is used for being combined with the development of a modern front-end frame, the iframe embedded webpage cannot be operated simultaneously and refreshed in real time.
In order to achieve the technical effect, the invention adopts the following technical scheme:
a web end development method using an iframe embedded webpage comprises the following steps:
dividing the configuration files into a main directory configuration file and a sub-project configuration file and respectively configuring;
when a command in the main directory configuration file is operated, a local http service is firstly created, and then all sub-project directories and configuration files under the sub-project directories are obtained;
respectively executing the compiling command in the configuration file, setting an output directory and opening a main directory in a browser;
setting code hot update service, monitoring the modification of a code file, and recompiling and updating an output file when the code modification is monitored; when the code modification triggers updating, firstly, which sub-item code is modified is judged, then, a corresponding compiling command is executed, a corresponding output file is replaced, and all codes cannot be recompiled every time;
in the technical scheme of the invention, the operation of the front-end project depends on a configuration document, the configuration document comprises various packages, http service configuration, script command configuration, compiling rules and the like required by the project, and in the scheme, a plurality of projects are supported to be compiled and operated under the same http service at the same time, so that a plurality of configuration documents are required and are divided into configuration files under a main directory (namely, main directory configuration files) and configuration files in each project (namely, sub-project configuration files) to respectively configure different functions; in configuration, item directories of a main item and sub items are configured in a package in json of the main directory, the directory names are also used as output directory names, and configuration documents under corresponding items can be respectively obtained through the directories; json under each catalog is configured under each project catalog, and the configuration comprises various package configurations, rule configurations and the like required by the compilation of the project, so that the compilation of each project is not related to each other, and different technical frameworks can be used for different projects; the project needs to be accessed under the same port after compiling and running, different projects are accessed through different directories, the main project can introduce corresponding sub-projects through the sub-directories under the root path when the sub-projects are embedded through the iframe, and an http address does not need to be set.
Further, configuring a master directory configuration file comprises configuring a directory, and configuring a script command and a script, wherein the configuring of the directory comprises specifying directory names for a directory (namely, a master directory) of a master project and a directory (namely, a sub-directory) of a sub-project, and the directory name where a code is located is the same as the directory name where a file generated after compiling is located; the script commands comprise a run command and a packed command, such as a start script command and a built script command of webpack.
Furthermore, the script of the running command comprises http creating service, sub-project compiling command calling and hot updating service creating; the script of the packaging command includes a sub-item compiling command which is called and a result is output to a corresponding directory, generally in a result folder, such as a dist or build directory, and also can be a self-defined directory name.
Further, the script execution flow of the execution command is as follows: firstly, a node is used for starting an http service, the http service is configured in the main directory configuration file, then, a multi-process mode is used for respectively operating and acquiring the operation command in each sub-directory configuration file, the output cache directory is set, and the result is output to the cache directory after each sub-item is compiled, so that the compiling process and the result are independent respectively.
Further, the script running flow of the packed command is as follows: firstly, creating or emptying a packaging command output directory, respectively operating packaging commands in configuration files of each sub-directory in a multi-process mode, setting the output directory, compiling and packaging codes of each sub-project according to the configuration files of each sub-project, and respectively outputting the codes to the corresponding sub-directories under the packaging commands after the compiling and packaging are completed.
Further, configuring the sub-project profile includes: firstly, compiling the function of codes, wherein different sub-projects can use different technical frameworks and component libraries as required; then, configuring a compiling and packing rule, and simultaneously packing and compiling a plurality of sub-items by using a node multi-process during running; when the compiling command of the sub-project is called, the sub-project is compiled by using the configuration file of the sub-project, the compiling process and result in each sub-project are independent, and the compiling process and result are output to the corresponding sub-directory after the compiling is finished.
Further, after the execution of the run command and the pack command is completed, a home page of the home directory is automatically opened in the browser.
Further, the setting of the code hot update service, monitoring modification of the code file, and when monitoring that the code is modified, recompiling and updating the output file specifically includes:
and starting a hot update service after compiling all the projects is finished, monitoring each project by a packaging tool, judging which directory is subjected to code update when monitoring code change, then independently calling a command of a compiling script of the project, updating files under the corresponding directories and updating the files into a browser.
Furthermore, sub-items are introduced into the main item through an iframe tag, items under other directories are introduced into the main item by using the iframe tag to set a URL, and a root path or a relative path is used for an introduction path, namely when the sub-items are nested by using the iframe tag in the main item, the reference path is a current http service address plus a page path under a corresponding sub-item folder.
Furthermore, three communication pairs are arranged between the main item and the embedded sub-item, wherein the first communication pair is used for transmitting parameters through a URL (uniform resource locator) and transmitting data required by page first loading; the second is that the window under iframe sets a monitoring function to communicate between items, and the iframe can also call the window, parent calls the method of the main item to communicate; the third is sharing data cache, storing data to a plurality of pages in the browser cache for sharing, and because all items are under the same http service, the problem caused by cross-domain does not exist.
Compared with the prior art, the invention has the following beneficial effects:
the invention relates to a web end development method using an iframe embedded webpage, which aims at the problem that the web end development method cannot be run simultaneously and refreshed in real time when the iframe embedded webpage is combined with the modern front end frame development, when a project is compiled, a main project and a sub-function project are compiled and put under different catalogs of the same port respectively, the main project and the sub-project are guaranteed to run under the same port simultaneously, but are decoupled on codes, the compiling and changing of the projects are not influenced mutually and independent, simultaneously, the code change in any project during the running can be recompiled for the corresponding sub-project, then hot updating is triggered, the modification effect is checked, the problems that the web end development method cannot be run simultaneously and the page cannot be refreshed in real time during the development are solved, and finally the compiling and running functions of a plurality of different sub-projects under the same project are realized, so that separate compiling, running and packaging are not needed, and the project is more convenient and can be refreshed in the development process, The method is quick and saves time and cost.
Drawings
FIG. 1 is a schematic flow chart of the present scenario run using a webpack packing tool.
Detailed Description
The invention will be further elucidated and described with reference to the embodiments of the invention described hereinafter.
Example (b):
the first embodiment is as follows:
a web end development method using an iframe embedded webpage uses a technology of asynchronously packaging different projects to a specified folder by a packaging tool to realize the function of compiling and running a plurality of different sub-projects under the same project. Figure 1 shows a flow diagram of the protocol run using the webpack packing tool.
That is, the present embodiment specifically discloses a scheme of using a packing tool such as webpack to compile and run a plurality of items simultaneously and output the items to different directories under the same http service, where the running environment is a node. The operation of the front-end project depends on the configuration document, the configuration document comprises various packages, http service configuration, script command configuration, compiling rules and the like required by the project, and particularly, in the scheme, the simultaneous compiling and operating of a plurality of projects under the same http service are supported, so that a plurality of configuration documents are required and are divided into configuration files under a main directory and configuration files in each project, and different functions are respectively configured.
In configuration, item directories of the main item and the sub items are configured in a package in json of the main directory, the directory names are also used as output directory names, and configuration documents under corresponding items can be acquired through the directories. Json under each catalog is configured, and the configuration comprises various package configurations, rule configurations and the like required by the compilation of the project, so that the compilation of each project is not related, and different technical frameworks can be used for different projects. The project needs to be accessed under the same port after compiling and running, different projects are accessed through different directories, the main project can introduce corresponding sub-projects through the sub-directories under the root path when the sub-projects are embedded through the iframe, and an http address does not need to be set.
Firstly, a main directory configuration file is configured, which mainly comprises directory configuration and script operation configuration, directory names are required to be specified for a main directory and sub-directories in the directory configuration, information related to the sub-directories is set under the page attribute, and the main directory configuration file must include but not be limited to the directory names, and the directory names where codes are located are the same as the directory names where files generated after compiling are located.
And then configuring a script command and a script, wherein the script command mainly comprises an operation command and a packaging command, such as a start script command and a build script command of webpack, and different scripts are respectively called. The operation command script mainly comprises creating http service, calling a sub-project compiling command and creating hot updating service, and the packing command mainly comprises calling a sub-project compiling command and outputting a result to a corresponding directory. In this embodiment, the script command includes a runtime command start and a package command build. Wherein the run command start will run a start. Js, the configuration related to the http service is also in a main directory configuration file, generally, the configuration is only required to be default configuration, and a user can also configure a port number, an ip address, a proxy agent and the like. After the service is operated, all projects are accessed under the http service, operation command starts in configuration files under each sub-project directory are respectively obtained, the sub-project directories are respectively operated in a multi-process mode, output cache directories are set, results are output to the cache directories after the sub-projects are compiled, and the compiling process and the results are independent.
The method comprises the steps that a build script is operated when a build command is operated, the build script firstly creates or empties a build output directory, the build command in each sub-directory configuration file is operated in a multi-process mode, the output directory is set, and sub-projects are compiled and packaged according to own configuration files and then output to corresponding sub-directories under the build respectively, wherein the sub-directories are generally dist or build directories and can also be self-defined directory names.
And then configuring a sub-project configuration file, wherein the sub-project configuration file mainly comprises package management required by project compilation, so that the sub-project configuration mainly comprises a function of compiling codes as common front-end configuration, different projects can use different technical frameworks, component libraries and the like according to requirements, then configuring a compilation packaging rule, and when a compilation command of a sub-project is called, compiling the project by using the sub-project configuration file, wherein the compilation process and the result in each project are independent and do not influence each other, and the compilation is output to a corresponding directory after the compilation is finished. And the node multiprocess is used for simultaneously packaging and compiling a plurality of items during running, so that the packaging speed can be increased, and the influence on experience caused by too slow packaging due to simultaneous packaging and compiling of a plurality of items is avoided. Therefore, the http service and the IP port are not configured in the sub-project configuration, and the output directory is not configured, and only the compiling code is responsible for outputting the compiled file to the specified directory.
After the operation command is finished, the home page of the main directory is automatically opened in the browser.
And finally, starting a hot update service after all the projects are compiled, monitoring each project by a packaging tool respectively, judging that the code is updated in the directory when the code is monitored to be changed, and then independently calling a command of a compiling script of the project to update the file in the corresponding directory and then updating the file in the browser.
When the main item uses the iframe tag to nest the sub-item, the sub-item is specifically introduced into the main item through the iframe tag, the main item uses the iframe tag to set the URL to introduce the item under other directories, the reference path is the current http service address plus the page path under the corresponding sub-item folder, and because the current http service address can be used without using the root path or the opposite path under the same http service, the corresponding sub-item page can be pointed without writing the http address. Three transmission parameter and communication modes are provided between the main project and the sub project, and the first mode is to transmit parameters through a URL (uniform resource locator) and transmit data required by page first loading. And the second method is that a window under iframe sets a monitoring function to communicate among items, and the iframe can also call a method for calling a main item by window. The third is sharing data cache, storing data to a plurality of pages in the browser cache for sharing, and because all items are under the same http service, the problem caused by cross-domain does not exist.
In summary, the web end development method using the iframe embedded webpage effectively solves the problem that projects embedded in the front end iframe cannot be compiled and run simultaneously by adopting the webpack compiling and running method of multiple projects, so that the projects are more convenient and faster in the development process, and the time cost is saved.
It will be understood that the above embodiments are merely exemplary embodiments taken to illustrate the principles of the present invention, which is not limited thereto. It will be apparent to those skilled in the art that various modifications and improvements can be made without departing from the spirit and scope of the invention, and such modifications and improvements are also considered to be within the scope of the invention.
Claims (1)
1. A web end development method using an iframe embedded webpage is characterized by comprising the following steps:
dividing the configuration files into a main directory configuration file and a sub-project configuration file and respectively configuring;
when a command in the main directory configuration file is operated, a local http service is firstly created, and then all sub-project directories and configuration files under the sub-project directories are obtained;
respectively executing the compiling command in the configuration file, setting an output directory and opening a main directory in a browser;
setting code hot update service, monitoring the modification of a code file, and recompiling and updating an output file when the code modification is monitored;
configuring a main directory configuration file comprises directory configuration, script commands and script configuration, wherein the directory configuration comprises the designation of directory names for directories of main items and sub items, and the directory name of a code is the same as the directory name of a file generated after compiling; the script command comprises an operation command and a packaging command;
the script of the operation command comprises http creating service, sub-project compiling command calling and hot updating service creating; the script of the packing command comprises a sub-item calling compiling command and outputs a result to a corresponding directory;
the script running process of the running command comprises the following steps: firstly, starting an http service by using a node, configuring the http service required by operation in a main directory configuration file, then respectively operating and acquiring an operation command in each subdirectory configuration file by using a multi-process mode, and setting an output cache directory, and outputting a result to the cache directory after each sub-item is compiled, so that the compiling process and the result are independent;
the script running process of the packed command comprises the following steps: firstly, creating or emptying a packaging command output directory, respectively operating packaging commands in configuration files of each sub-directory in a multi-process mode, setting the output directory, compiling and packaging codes of each sub-project according to the configuration files of each sub-project, and respectively outputting the codes to the corresponding sub-directories under the packaging commands after the compiling and packaging are completed;
configuring the sub-project profile includes: firstly, compiling the function of codes, wherein different sub-projects can use different technical frameworks and component libraries as required; then, a compiling and packing rule is configured, and a plurality of sub-items are packed and compiled simultaneously by using a node multi-process during running; when a compiling command of the sub-project is called, compiling the sub-project by using the configuration file of the sub-project, wherein the compiling process and result in each sub-project are independent, and the compiling process and result are output to the corresponding sub-directory after the compiling is finished;
after the operation of the operation command and the packaging command is finished, automatically opening a home page of the main directory in the browser;
the setting code hot update service monitors the modification of a code file, and recompiling and updating an output file when the code modification is monitored specifically comprises the following steps:
starting a hot update service after compiling all projects is completed, monitoring each project by a packaging tool respectively, judging which directory has been subjected to code update when monitoring code change, then independently calling a command of a compiling script of the project, updating files under the corresponding directories and updating the files into a browser;
introducing sub-items in the main item through an iframe tag, setting URL (uniform resource locator) in the main item by using the iframe tag to introduce items under other directories, and introducing a path by using a root path or a relative path;
three communication pairs are arranged between the main project and the embedded sub-project, wherein the first communication pair is to transmit parameters through a URL (uniform resource locator) and transmit data required by page loading for the first time; the second is that the window under iframe sets a monitoring function to communicate between items, and the iframe can also call the window, parent calls the method of the main item to communicate; the third is sharing data cache, which stores data in the browser cache to be shared by a plurality of pages.
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011104518.1A CN112230918B (en) | 2020-10-15 | 2020-10-15 | Web end development method using iframe embedded webpage |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011104518.1A CN112230918B (en) | 2020-10-15 | 2020-10-15 | Web end development method using iframe embedded webpage |
Publications (2)
Publication Number | Publication Date |
---|---|
CN112230918A CN112230918A (en) | 2021-01-15 |
CN112230918B true CN112230918B (en) | 2022-08-19 |
Family
ID=74118232
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202011104518.1A Active CN112230918B (en) | 2020-10-15 | 2020-10-15 | Web end development method using iframe embedded webpage |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN112230918B (en) |
Families Citing this family (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113721912B (en) * | 2021-08-31 | 2022-09-16 | 浩鲸云计算科技股份有限公司 | Dynamic subpackaging and packing method of micro front-end framework based on umi |
CN113821194A (en) * | 2021-09-10 | 2021-12-21 | 上海云轴信息科技有限公司 | Micro front-end system |
Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106843869A (en) * | 2017-01-16 | 2017-06-13 | 百融(北京)金融信息服务股份有限公司 | A kind of front end Development Engineering system and method |
CN107797837A (en) * | 2017-08-30 | 2018-03-13 | 上海壹账通金融科技有限公司 | Page display method, device, server and medium |
CN109933349A (en) * | 2019-01-28 | 2019-06-25 | 优信拍(北京)信息科技有限公司 | A kind of method to be timely updated based on vue spa, system and equipment |
CN110347378A (en) * | 2019-07-12 | 2019-10-18 | 北京明略软件***有限公司 | The building method and device of item development environment |
CN111427558A (en) * | 2020-04-10 | 2020-07-17 | 创盛视联数码科技(北京)有限公司 | Method for customizing front-end automatic development environment based on webpack |
Family Cites Families (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US10437568B1 (en) * | 2017-05-18 | 2019-10-08 | Palantir Technologies Inc. | Real-time rendering based on efficient device and server processing of content updates |
CN111273898B (en) * | 2020-02-25 | 2024-03-19 | 安徽以萨数据技术有限公司 | Automatic construction method, system and storage medium for web front-end code |
CN111459503B (en) * | 2020-03-30 | 2023-09-29 | 北京顺达同行科技有限公司 | Web front-end project deployment method, device, server and storage medium |
-
2020
- 2020-10-15 CN CN202011104518.1A patent/CN112230918B/en active Active
Patent Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106843869A (en) * | 2017-01-16 | 2017-06-13 | 百融(北京)金融信息服务股份有限公司 | A kind of front end Development Engineering system and method |
CN107797837A (en) * | 2017-08-30 | 2018-03-13 | 上海壹账通金融科技有限公司 | Page display method, device, server and medium |
CN109933349A (en) * | 2019-01-28 | 2019-06-25 | 优信拍(北京)信息科技有限公司 | A kind of method to be timely updated based on vue spa, system and equipment |
CN110347378A (en) * | 2019-07-12 | 2019-10-18 | 北京明略软件***有限公司 | The building method and device of item development environment |
CN111427558A (en) * | 2020-04-10 | 2020-07-17 | 创盛视联数码科技(北京)有限公司 | Method for customizing front-end automatic development environment based on webpack |
Non-Patent Citations (3)
Title |
---|
webpack;前端技术空间--易建勇;《https://yi-jy.com/2017/06/08/webpack/》;20170608;第1-28页 * |
webpack-dev-server使用方法,看完还不会的来找我~;webpack-dev-server使用方法,看完还不会的来找我~;《https://segmentfault.com/a/1190000006670084》;20160821;第1-13页 * |
webpack模块解析;小火柴的蓝色理想;《https://www.cnblogs.com/xiaohuochai/p/7002765.html》;20170613;第1-5页 * |
Also Published As
Publication number | Publication date |
---|---|
CN112230918A (en) | 2021-01-15 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN109933522B (en) | Test method, test system and storage medium for automatic case | |
US20130339841A1 (en) | Systems and methods of a script generation engine | |
CN103237083B (en) | A kind of mobile information service resource paradigmatic system and method | |
CN112230918B (en) | Web end development method using iframe embedded webpage | |
CN113010827B (en) | Page rendering method and device, electronic equipment and storage medium | |
US9729677B2 (en) | Method of adding client server automation to computer languages for cloud computing | |
CN108628626B (en) | Development environment building method, code updating method and device | |
CN110795139A (en) | Client batch packaging method and device, computer equipment and storage medium | |
CN111651169B (en) | Block chain intelligent contract operation method and system based on web container | |
CN105824616A (en) | Development method and frame for equipment control system program | |
CN112114896A (en) | Plug-in framework and method for service function expansion | |
CN115827100A (en) | Method and system for merging industrial software microservice | |
CN116911588A (en) | Business process execution method, device, equipment and storage medium | |
CN116301951A (en) | Micro-service application installation upgrading method and device based on kubernetes | |
CN113419969B (en) | Interface automatic formation power guarantee method based on browser plug-in | |
CN113157274B (en) | Software development method and device based on micro front end, electronic equipment and storage medium | |
CN117519877A (en) | Rendering method and device of quick application card, storage medium and electronic equipment | |
CN115658140A (en) | SDK packaging method, device, terminal and storage medium | |
CN115390846A (en) | Compiling construction method and device, electronic equipment and storage medium | |
Paronen | A web-based monitoring system for the Industrial Internet | |
CN115639984A (en) | Method and system for realizing front-end online compiling engine | |
JP7059757B2 (en) | API processing method, terminal, API processing program | |
CN112433816A (en) | Performance optimization method and device based on Javascript engine | |
CN114662022A (en) | Application isolation method and device | |
CN115202630B (en) | Scaffold construction method based on web front-end engineering |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |