Opening a page from within an iframe into the parent window from a button?

JavaScript
#1

Hi,

I have a page within an iframe that I would like to open in the main parent window when a user clicks a button.

The script I am using is a quiz that automatically send a user to the next question once they have selected the answer to the previous question by clicking a button.

I have put this together as an example of a link with a target, but not sure how to do the equivalent with a button.

$("#question.page-1 a").attr("target","_parent");

I basically need to target a button within a div with an ID of question and a class page-1

This is an example of the outputted HTML:

<div id="question" class="col-sm-12 col-centered page-1">
 <div ng-repeat="question in main.quizQuestions.pages[main.currentPage-1].questions" class="question ng-scope" ng-if="main.checkCuepoint(question)">

        <!-- Questions statement and points-->
        <div class="question-statement-line layout-align-space-between-start layout-row">
            <h3 class="question-header"><!-- ngIf: main.quizConfig.settings.showQuestionNumber -->
                <span ng-bind-html="question.statement" class="ng-binding">I ask for the help of others when I require it.</span>
        </div>
        <div class="answer-container layout-padding layout-wrap layout-row" ng-style="{'background-image': 'url('+question.bgImg+')',
                       'min-height':question.minHeight + 'px'}" style="background-image: url(&quot;&quot;);">

           <single-answer quiz-main="main" question-id="question.id" class="single-answer ng-scope ng-isolate-scope flex" ng-if="main.quizQuestions.pages[main.currentPage-1].questions[this.$index].type === &quot;single-answer&quot; &amp;&amp; main.checkCuepoint(question)">

               <div class="layout-answers layout-wrap ng-scope layout-row" ng-class="{'halfWidth': ctrl.quizMain.questionsData[ctrl.questionId].halfWidth}" ng-if="ctrl.quizMain.questionsData[ctrl.questionId].choicesType==='button'">

   
                   <div ng-repeat="choiceID in ctrl.quizMain.questionsData[ctrl.questionId].choicesID" ng-class="{'item-separation': ctrl.quizMain.questionsData[ctrl.questionId].itemSeparation}" class="ng-scope flex-100 flex-sm-100 item-separation" flex="100" flex-sm="100">

<!-- BUTTONS HERE -->
        <button class="md-button md-ink-ripple md-raised" type="button" ng-transclude="" ng-click="ctrl.setAnswers(choiceID)" ng-class="['md-raised',
                             {'md-primary': choiceID == ctrl.quizMain.questionsData[ctrl.questionId].answer,
                              'textLeft': ctrl.quizMain.questionsData[ctrl.questionId].textLeft,
                              'no-border': ctrl.quizMain.questionsData[ctrl.questionId].noBorder,
                              'semitransparent': ctrl.quizMain.questionsData[ctrl.questionId].semitransparent}]" aria-label="Strong Agreement" tabindex="0">

.......

The buttons are not actually links, but send the user to a new question.

I don’t know if it’s possible, but can anyone suggest how to open a button in the parent window?

Thanks.

#2

It should be possible. This is known as “breaking out of frames”. Where a link can do it with the target, I believe you can do the same if you have the button click event use something like window.parent.location.href = <someurl>.

Here is my page 2 (p2.html)…

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Page 2</title>
</head>
<body>
	<script>
	   function breakOut() {
	   	window.parent.location.href = 'https://www.google.com';
	   }
	</script>
	Click this button
	<button onclick="breakOut()">Click to break out</button>

</body>
</html>

Now show this page in page 1 (p1.html)…

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Page 1</title>
</head>
<body>
	<iframe src="p2.html" width="300" height="300"></iframe>
</body>
</html>

Now view page 1 in your browser. You should see page 2 in the iframe. Clicking the button, causes page 1 (the parent page) to change to google.com.

Is this what you are wanting to do? :slight_smile:

1 Like
#3

Thanks for the reply.

Yes, that is what I am trying to do :slight_smile:

Thank you for your help, really appreciate it.