I am trying to get an iframe to run js on my site
the iframe page is as follows (some php omitted for relevance):
<?php
function createModeratorFormPart($moderator_email = null, $modNumber = 5){
echo "<script src=\"frontend.js\"></script>"; //implement adding moderators dynamically and such
echo "<fieldset id=\"moderator\">";
echo "<button onClick=\"addModerator()\">Add a moderator</button>";
if($moderator_email == null){ //if we have no moderators set
echo "<div>";
echo "<input class=\"addCommunityInput\" type=\"email\" name=\"moderator[$i]\" placeholder=\"Moderator Email\">";
echo "<button onClick=\"dropModerator(this)\">-</button>";
echo "</div>";
}else{
for($i = 0; $i < count($moderator_email); $i++){
echo "<div>";
echo "<input class=\"addCommunityInput\" type=\"email\" name=\"moderator_email[$i]\" placeholder=\"Moderator Email\" value=\"" . $moderator_email[$i] . "/>";
echo "<button onClick=\"dropModerator(this)\">-</button>";
echo "</div>";
}
}
echo "</fieldset>";
}
?>
<html>
<head>
<link rel="stylesheet" href="/web/addOfferingStyles.css" type="text/css" />
<script src="/web/frontend.js"></script>
</head>
<body>
<?php if(isset($_GET['success'])){
echo '<p>Offering successfully created</p>';
}else{
echo "<p>$retCode</p>";
}
?>
<h1 id="addCompOff">New Community Period</h1>
<form method="post" id="addCommunityForm" action="<?php echo 'https://theprepapp.com'. $_SERVER['PHP_SELF'];?>">
<input type="hidden" name="formSubmit" value="1"></input>
<input class="addCommunityInput" type="text" name="name" placeholder="Offering Name" />
<input class="addCommunityInput" type="text" name="description" placeholder="Description" />
<input class="addCommunityInput" type="text" name="location" placeholder="Location & Time Information" />
<input class="addCommunityInput" type="number" name="peopleLimit" placeholder="Student Capacity" />
<input class="addCommunityInput" type="text" name="moderator" placeholder="Moderator Names(s)" />
<?php createModeratorFormPart(); ?>
</fieldset>
<div>
<p>Days Offered:</p>
<div class="control-group">
<label class="control control-checkbox">
Monday
<input name="monday" type="checkbox"/>
<div class="control_indicator"></div>
</label>
<label class="control control-checkbox">
Tuesday
<input name="tuesday" type="checkbox"/>
<div class="control_indicator"></div>
</label>
<label class="control control-checkbox">
Wednesday
<input name="wednesday" type="checkbox" />
<div class="control_indicator"></div>
</label>
<label class="control control-checkbox">
Thursday
<input name="Thursday" type="checkbox" />
<div class="control_indicator"></div>
</label>
<label class="control control-checkbox">
Friday
<input name="Friday" type="checkbox" />
<div class="control_indicator"></div>
</label>
</div>
<input type="submit" value="Submit">
</form>
</body>
</html>
I am trying to run this function:
function addModerator(){
var fieldset = document.getElementById("moderator");
//create encompassing div so that deletion of the moderator can be deleted easily
var div = document.createElement("div");
div.setAttribute("className", "moderator");
//create label
var label = document.createElement("Label");
label.appendChild(document.createTextNode("Moderator"));
div.appendChild(label);
//create text field
var input = document.createElement("Input");
input.setAttribute("placeholder","Moderator Email");
input.setAttribute("type","email");
div.appendChild(input);
//create the delete button
var button = document.createElement("button");
button.setAttribute("value","-");
button.setAttribute("onClick", "dropModerator(this)");
div.appendChild(button);
//add the div to the fieldset
fieldset.appendChild(div);
}
When I run this through the onClick event, the console does not show any JS errors: however, the iframe document becomes the document of the parent page (even though the iframe src attribute is not changed) (linked to here, though I can't imagine how it would be relevant: https://github.com/articDrag0n/PrepApp/blob/master/web/teacher/teacher.php) How is this happening?
