Reload iframe src / location with new url not working in Safari

Question

I have a page that loads with initially just a form within an iframe, something like this:

<iframe id="oIframe" ...src='somePage>' <form ... /> </iframe>

When you click a button in the form, some javascript is invoked that builds a url and then I want to do the following:

frame.src = 'somePage?listId=1';

This works in IE to "reload" the frame with the new contents. However, in Safari this does not work.

I have jQuery available, but I don't want to replace the existing iframe because there are events attached to it. I also can not modify the id of the iframe because it is referenced throughout the application.

I have seen some similar issues but no solutions that seem to work well for my exact issue.

Any assistance anyone can provide would be great!

Solution 1

I found a better solution (albeit not paticularly eloquent) for this using jQuery.ajax:

jQuery.ajax({
   type: 'GET',
   url: "/somePage?someparms",
   success: function() {
      frameObj.src = "/somePage?someparms";
   }
});

This forces the DOM to be read within the frame object, and reloads it once the server is ready to respond.

Solution 2

Some browsers don't use "src" when calling the javascript object directly from the javascript hierarchy and others use "location" or "href" instead of "src" to change the url . You should try these two methods to update your iframe with a new url.

To prevent browser cache add a pseudo-random string like a number and timestamp to the url to prevent caching. For example add "new Date().getTime()" to your url.

Some calling examples:

document.getElementById(iframeId).src = url;

or

window.frames[iframeName].location = url;  

I recommend the first option using document.getElementById

Also you can force the iframe to reload a page using

document.getElementById(iframeId).reload(true);

Solution 3

So the answer is very simple:
1. put a <div id="container"> </div> on your page
2. when reload needed use following jQuery:

$("#container").empty();
$("#container").append("<iframe src='" + url + "' />");

and that's it. Of course there is more elegant way of creating DOM with jQuery but this gives the idea of "refreshing" iframe. Works in FF18, CH24, IE9, O12 (well it's jQuery so it will work almost always :)

Solution 4

Try this

form.setAttribute('src', 'somePage?listId=1');

View more solutions