How to copy the html contents of one iframe to another iframe including CSS?
Question
i am writing a HTML webPage which contains two iframes, say iframeA and iframeB. Frequently i need to copy the HTML contents of iframeA into HTML contents of iframeB using JavaScript. Using document.body.innerHTML property I can copy the contents but i have no idea. How to copy the style(CSS) attribute of each element of iframeA into iframeB ?
Any Suggestions ?
2 answers
solution1
1 2016-02-17 06:23:12
JQuery's .css() can do this: http://api.jquery.com/css/
For instance, you can do something along the lines of:
function copyCss() {
var iframeABackgroundColor = $('#iframeAElementID').css("background-color");
$('#iframeBElementID').css("background-color", iframeABackgroundColor); }
JSFiddle demonstrating the concept: https://jsfiddle.net/xbdk0jy9/1/
solution2
1 ACCPTED 2016-02-17 11:35:53
I found the solution to the problem. i used <div> tag inside <body> tag in both iframes' html. So my iframe HTML contents are within <div> tag as bellow:
<html>
<body>
<div id = "mydiv">
//Body contents
</div>
</body>
<html>
then i used importNode() and replaceChild() API to replace <div> node of iframeB with <div> node of iframeA. This will handle all the HTML elements and its style under <div> tag. No need to iterate each element to check and copy the style.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.