We have a struts based application with jsp view. One of the web page after loading has iframes and nested frames. We want to get rid of them and thought of using div and Ajax instead. The page has around 7+ frames and we used 7+ ajax calls to load the data in each of them. Instead of src attribute in frames tag we used "data" attribute in div, added the url in them and used that url in ajax call.

For Example:

<div id="test" data-url="Required URL"></div>
<script>
var elm = document.getElementById("test");
$.ajax({
  url: elm.dataset.url,
  dataType: html,
  success: function(data){
    $("#test").html(data);
  }
});
</script>

It would be like the first div is loaded and inside that content another div will be there and it will be loaded next and so on.

We are currently facing few issues like:

• Sometimes, the script tags in the HTML data loaded by Ajax call are not working properly.
• If there is any javascript error happens in the HTML data loaded by Ajax call, the script inside the success part of Ajax call doesn't work.
• The same is working when frames are used. The browser back and forward button is not working with Ajax.

Do you think there is an efficient way to replace iframe/frames or to resolve these mentioned issues? Please do help. Thanks.