Question

我正在尝试使用iframe在我的网站上运行js

iframe页面如下（为了相关性省略了一些php）：

    <?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>

我正在尝试运行此功能：

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);
}

当我通过onClick事件运行时，控制台不会显示任何JS错误：但是，iframe文档将成为父页面的文档（即使iframe src属性未更改）（链接到这里，虽然我无法想象它是如何相关的：https://github.com/articDrag0n/PrepApp/blob/master/web/teacher/teacher.php）这是怎么发生的？

Answer 1

问题在于表单提交

每次我点击一个按钮，表单都会提交（由于表单处理代码，会转到父页面）;

解决方案是添加此行button.setAttribute（“type”，“button”）; 或者，如果你在html中执行此操作＆lt; button type =“button”＆gt;

结束了这个的克隆：Can I make a <button> not submit a form?

iframe在js函数调用上加载父页面

1 个答案: