My experience in web development is still limited, but I have a requirement to display an iframe within a larger window without refreshing the HTML content inside it. I prefer to achieve this using just JavaScript/CSS, but I'm not sure where to start.
Currently, I have an iframe click event that triggers a jQuery UI dialog with the same HTML content as the iframe. However, the page loaded inside the dialog also loads all the previously run JavaScript, creating some issues.
header
<!-- jquery -->
<script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
<!-- html dialog -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
javascript
<script>
$(document).ready(function() {
var $dialog = $('#dialog').dialog({
autoOpen: false,
modal: true,
height: 850,
width: 900,
title: "Some title"
});
$('.iframe-class').load(function(){
$(this).contents().find("body").on('click', function(event) {
//$( "#dialog" ).dialog( "open" );
var page = "http://localhost/test/graph.html";
var $dialog = $('#dialog')
.html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>');
$dialog.dialog('open');
});
});
});
</script>
html
<div id="frametest">
<iframe class="iframe-class" scrolling="no" src="/test/graph.html?a=1">
<p>Your browser does not support iframes.</p>
</iframe>
<div id="dialog"></div>
</div>
Thank you for any assistance provided!