I have a unique requirement for two iframes - I want only the first iframe to load a specific URL. Once the first iframe finishes loading, I need the second iframe to display the same content without actually loading the URL again. Here is the approach I have attempted:
Experiment with it here: https://www.example.com
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function() {
$('#iframeID1').on('load', function() {
$('#iframeID2').contents().find('html').html($('#iframeID1').contents().find('html').html());
});
});
</script>
</head>
<body>
<iframe id="iframeID1" src="https://www.example.com/first" frameborder="0" scrolling="no" width="180px" height="512" align="left">
</iframe>
<iframe id="iframeID2" frameborder="0" scrolling="no" width="180px" height="512" align="middle">
</iframe>
</body>
</html>However, the second iframe (on the right) is displaying incorrectly (CSS not loaded):