URL Redirect: Breaking Out of an iFrame

Are you using an iframe embed to share a survey on your website? Are you also wanting to redirect respondents to another website once they have completed your survey? If so, this tip is for you!

How does the URL Redirect work now?

URL redirect in iframe embedded surveys will be "trapped" inside the iframe. In other words, the new website will only show up inside the iframe window, which is usually not what users desire.

Thankfully, there are a couple of ways around this! Both options involve removing the URL Redirect action and using some custom JavaScript instead to achieve the desired behavior.

Open in a new window

The first option is to open the new website in a new window, which would accomplish the goal of "breaking out" of the iframe. A problem with this solution is that most modern browsers automatically block pop-up windows, so your respondents are not likely to see the new window you tried to open.

If you'd like to use this first solution, you may wish to include some text on the final page of your survey letting the respondent know that you have opened a new window in their browser. In case the window was blocked, often the user is given an option to override that and allow the window if they choose. Here is an example piece of JavaScript that would open a website in a new window:

$(function() {
  if ('app' !== $('body').attr('id')) {
    window.open('http://www.Alchemer.com');
  }
});

Place this JavaScript in a JavaScript Action in place of the URL Redirect Action.

To add a new JavaScript Action, start in the Build tab on the page you would like to have this behavior:

1. Click Add New Action at the bottom of the page.

2. Select JavaScript.

3. Paste the above code in the JavaScript field, change the highlighted URL to the website you would like to redirect to and click Save Action.

Note: JavaScript Actions already include an opening and closing script tag, so you do not need to add them.

Redirect the page containing your iframe embed

The second option would be to redirect the page where you have your iframe embedded, known as the "parent" page. Modern browsers will prevent an iframe from changing the location of its parent page for security reasons. Your iframe embed code and JavaScript code will need to be modified to allow this behavior.

To modify your iframe embed code, you will add the following attribute inside the opening iframe tag:

sandbox="allow-top-navigation allow-scripts allow-forms"

As an example, here is a standard iframe embed code, with the necessary modifications highlighted to illustrate where they should be added:

<iframe src="http://www.Example.com/s3/1234567/surveyname" frameborder="0" width="700" height="500"
 style="overflow:hidden" sandbox="allow-top-navigation allow-scripts allow-forms"></iframe>

And inside your survey, instead of using the javascript to "open in a new window," you would use this bit of javascript instead.

$(function() {
  if ('app' !== $('body').attr('id')) {
    window.top.location.href = 'http://www.example.com';
  }
});

Set this up in the same manner as outlined in the "open in a new window" solution above. Happy surveying!