简体   繁体   中英

How to trigger iframe post from parent click event

I am using Jquery multiple file upload control to upload the multiple files. It is very good plug in, All operations are working fine.

I want to load that plug in iframe and i should trigger the global start post back method from parent window

Following is my sample code

LibraryDocs.aspx(parent interface)

> <iframe style="width: 90%; height: 300px" id="multipleFileUploadFrame"
> src="../Secure/MultipleFileUpload.htm" runat="server" />

> <asp:Button ID="postCompleteButton" runat="server" Text="Post Complete" />

Here is my MultipleFileUpload.htm

<div id="fileupload">
        <form id="multipleUpload" action="../Secure/MultipleUploadHandler.ashx" method="POST"
        enctype="multipart/form-data">
        <div class="fileupload-buttonbar">
            <label class="fileinput-button">
                <span>Add files...</span>
                <input id="file" type="file" name="files[]" multiple />
            </label>
            <button id="startUpload" type="submit" class="start">
                Start upload</button>
            <button type="reset" class="cancel">
                Cancel upload</button>
            <!--<button type="button" class="delete">Delete files</button>-->

        </div>
        </form>
        <div class="fileupload-content">
            <table class="files">
            </table>
            <div class="fileupload-progressbar">
            </div>
        </div>
    </div>

So my problem is after clicking postCompleteButton button in parent window it should fire the post event(start button) in child window which is in iframe

If both pages are in the same origin, you can reffer to this , otherwise use library like easyXDM ( http://easyxdm.net/wp/ ). It will allow you to exchange messages or setup remote procedure calls between the iframe and the container windows. Check this page from the documentation - remote procedure calls

If you are using jQuery, you can access the iframe DOM using

$('#<%= multipleFileUploadFrame.ClientID %>').contents()

With this in mind, to click the Start upload button in the iframe, use

$('#<%= multipleFileUploadFrame.ClientID %>').contents().find('#startUpload').click();

Please keep in mind that this will only work if the parent and iframe source is on the same domain as the browser will adhere to the same origin policy

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM