iframe在js函數調用上加載父頁面

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 <button type =“ button”>

最終成為這個副本：我可以使<button>不提交表單嗎？

iframe在js函數調用上加載父頁面

問題描述

1 個解決方案

解決方案1
0 已采納 2017-08-18 16:16:51

iframe在js函數調用上加載父頁面

問題描述

1 個解決方案

解決方案1 0 已采納 2017-08-18 16:16:51

解決方案1
0 已采納 2017-08-18 16:16:51