Then we can define the background color CSS corresponding to consle. Next, we can use ntentDocument to get the content of the iframe, and then manipulate it: Ĭonst ifrme = document.querySelector('iframe') Ĭonst iframeDoc = ntentDocument Then we insert an iframe into index.html localhost:8080/iframe.html, the code is as follows: Because we need to use related APIs to manipulate iframes, for security reasons, browsers can only use iframe link same domain, otherwise a cross-domain error will be reported.įirst, prepare a index.html and iframe.html, use a static resource server to run them, suppose they all run at localhost:8080. To achieve a Codepen-like effect, the most important step is how to inject the code into the iframe. With the new sandbox attribute of HTML5, you can define more precise permissions for the iframe, such as whether to allow it to run scripts, whether to allow it to pop up and so on. So what are the benefits of using iframes? The iframe can independently become a sandbox environment isolated from the host, and the code running in it will not affect the host in most cases, which can effectively ensure security. It writes the content directly into a certain html file, and then embeds it into other web pages in the form of an iframe to realize the logic of code preview. It is not difficult to imagine that its operating principle is a bit similar to document.write. After opening the console and self-absorption observation, it can be found that the entire white area is a iframe, and the html content in it is the code we just edited. I simply wrote a button in Codepen, bound the style and click event, and you can see that the white area has shown the result we want. But these operations are a eval complicated and unsafe (060f658601baea and new Function() are prone to accidents), so is there any way to be both elegant and convenient, and safe to run dynamically? Let's take a look at how the famous Codepen does it. This attribute also accepts the values self and src which represent the origin in the iframe's src attribute. A list of origins the frame is allowed to display content from. If we want to run these resources dynamically, we can use DOM manipulation for html and css, and we can use eval or new Function() for js. A string that specifies the alignment of the frame with respect to the surrounding context. We know that the browser processes html, css and js resources through its own engine, and the processing process starts when the page loads. Since the business only needs to execute JS code, the demo only has the ability to run JS code. After some research, I developed a demo with basic online code running capabilities. It just happens that I have a business need to use a capability similar to Codepen recently. It can display the running effect of the code in real time, whether it is code demonstration or test function. I have always felt that Codepen's online code preview system is amazing.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |