Next, we can use ntentDocument to get the content of the iframe, and then manipulate it: Ĭonst ifrme = document.querySelector('iframe') Ĭonst iframeDoc = ntentDocument #Javascript iframe code#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. #Javascript iframe how to#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. 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. We know that the browser processes html, css and js resources through its own engine, and the processing process starts when the page loads. Alternatively, embed is used to embed other types of content, including PDFs, browser plugins, and Flash animations. As mentioned, we use iframe to embed an HTML document onto a page. However, these two elements do slightly different things. Since the business only needs to execute JS code, the demo only has the ability to run JS code. Like iframe, the embed element is used to embed an external resource in a web page. 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 |