How to completely copy the elements within an iframe and present them outside the iframe?

I know our needs are strange, but they do exist.

We will open a specified page in an iframe within a web page, then copy a specified element, take it outside the iframe, and ask for a perfect representation of it. For example, if the background color defined in a div, is red, it should also be red when it is taken outside. (note that the style definition of head benefit in iframe cannot be copied to the outside)

I think the crux of the problem is to find out exactly what css definitions are in that div, in iframe, and then assign values to the outside div. But I don"t know how to find a css definition of an element.

I hope all of you can help me.

Html css

Mar.07,2021

1, copy all runtime styles to the inline style of the new element document.defaultView.getComputedStyle (element, ""). CssText; ), but there is no way for pseudo elements and animation
2. Extract all the corresponding style definitions and copy them to the outside, you need to find them in this document.styleSheets . The advantage is that pseudo elements work correctly, but the animation needs to write something to copy it completely, and it seems that the new chrome does not allow external styles to be traversed from here, so this may also be incomplete

Previous: How to use nginx to make http jump to https? in secondary subdomain name

Next: Mongoose fuzzy query based on Chinese characters

Countdown, click event?
A timing examination system is triggered if the click event is triggered within 5 seconds, and if it is not triggered, the system marks the correct answer at the end of the countdown. How to implement ...

Html css javascript

Feb.26,2021
Why not pause after alert, but immediately refresh the address, this alert is written by yourself?
...

Html css javascript

Feb.26,2021
Running npm run dev on nuxt will report an error as follows
...

Html5 node.js html css javascript

Feb.26,2021
What fullpage plug-in with arrows and dot navigation
as shown in the red box of the second picture, is there any recommendation for this plug-in? Thank you. the screenshot is uploaded, so let s just look at it. nothing can be found in vueawesome. ...

Vue.js html5 html css

Feb.26,2021
Clear floating and flex layout
I would like to ask why the clear floating code I wrote is invalid. and. How to use the flex layout to make the horizontal arrangement of the above two div fill the entire screen. The third div is filled with the bottom location. code is as follows: `...

Html css

Feb.26,2021
How to get user id?
there is an h5 page embedded in the encapsulated APP. After the function of issuing an order, how can I get the user s id to add the address and place the order ...

Html css php javascript

Feb.26,2021
On the problem of element movement in canvas
A picture grows slowly when it slides up to a certain extent. Why does it bring out a line that has been entangled all night? I can t find the reason. ...

Html5 html css javascript

Feb.26,2021
Answer questions online? Increase or decrease in data?
A similar question, I want to know how to deal with the number of correct answers. I originally wanted to declare a variable and then decide to add it when the answer is right, but not if it is wrong. But what is printed is always 0 and 1 ....

Html css php javascript

Feb.26,2021
The chamfering effect is realized by css under mac, and the display is abnormal.
mac chamfering effect, the display is abnormal, the code is as follows, please take a look at ...

Html css

Feb.26,2021
It is worth passing between pages
make an answer system, trigger the click event on the answer page (choose the correct answer), and add 1. No mistakes. Now the whole answer is finished. Jump to another page, that is, the answer completion page, how can I get the value of the correct ans...

Html css php javascript

Feb.27,2021
The string is concatenated, the string becomes numeric and added, and the string is converted into numeric value.
my Q starts from scratch, but I want him to write ti+= < p claqss= "title-count " > has answered 8 questions + Q claqss= "title-count " > answered 1 question correctly; wrote like this: ti+= < p claqss= "title-count " > answered 8 questions + Q...

Html5 html css javascript

Feb.27,2021
There is a spacing problem with html layout.
html and .tool-container if there is no width:100%;, the default is not full, why? I hope I can simply build a html to paste my code into it and help me find the problem. Thank you ...

Html css javascript

Feb.27,2021
The parent div sets the property of overflow-y:auto, and the box-shadow property of div cannot be displayed on the left and right sides of it.
regarding the problem of css style, the parent div sets the property of overflow-y:auto, in which the box-shadow attribute of div cannot be displayed on the left and right sides. code is as follows: <div id="box"> <div class=&qu...

Css3 html css

Feb.27,2021
Add shipping address?
the background gives me an interface to tell me the parameters to be passed, and how to click Save to save the address information entered by the user to the address list ...

Html css php javascript

Feb.27,2021
How to keep the document stream from moving when using transform:scale
as shown in the figure above, use css to make a magnification effect when a mouse passes over a square, but as soon as you enlarge a square, the square next to it will be squeezed out or squeezed into the next row. Is there any way to fix the enlarge...

Html css css3 web front-end

Feb.27,2021
How to bind each row of data to a jqgrid click event
try the events and methods of jqgrid api, are useless, ask the boss what good methods are available ...

Php html5 html css javascript

Feb.27,2021
How to disable the drop-down and refresh of mobile phone chrom
the new project found that testing the drop-down on chrome will refresh the page look at Mobile Taobao s implementation of the drop-down and do not know how to achieve it ...

Sass html5 html css javascript

Feb.27,2021
How to solve this asynchronous problem? Why is the array out of console.log always o?
o ...

Java html css html5 javascript

Feb.27,2021
How to split the data? What do you do with the data?
when I click the button to select a region, there will be three addresses of provinces, cities and regions. I got the value through .html, but the parameters required by the background are separated by city and county. What do I do with the data segmen...

Html css php javascript

Feb.27,2021
How does WeChat Mini Programs implement the step-by-step bar or who has used it in his project?
...

Html5 html css javascript

Feb.27,2021