Showing results for 
Search instead for 
Did you mean: 

Download is not working inside iframe

Hi All,

I want to show an external url  eg( inside iframe and there is a button to download file on click, But the download button dose not work inside the iframe.. 

Is there any solution to fix this error?


Thanks in Advance



Tags (2)
0 Kudos
3 Replies

Thanks for your reply, Please find my below code. it works fine in emulator and not in devices. 

Sample downloaded from

<!DOCTYPE html>



* Please see the included file for license terms and conditions.



<link rel="stylesheet" type="text/css" href="app_framework/css/af.ui.min.css">

<link rel="stylesheet" type="text/css" href="app_framework/css/icons.min.css">

<meta charset="UTF-8">

<title>Blank App Designer Cordova Web App Project Template</title>

<meta http-equiv="Content-type" content="text/html; charset=utf-8">


* The "meta viewport" tag (below) helps your app size appropriately to a device's ideal viewport.

* Note that Windows device viewports work better when initialized using the @viewport CSS rule.

* For a quick overview of "meta viewport" and @viewport, see this article:


* To see how it works, try your app on a real device with and without a "meta viewport" tag.

* Additional useful references include:





<!-- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1"> -->

<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">

<!-- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1, maximum-scale=2"> -->


/* following three (cascaded) are equivalent to above three meta viewport statements */

/* see */

/* see */

@-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; } @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }

@-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; } @viewport { user-zoom: fixed ; min-zoom: 100% ; }

/*@-ms-viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; } @viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }*/


<link rel="stylesheet" href="css/app.css">

<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">

<!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! -->

<!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work below -->

<!-- <script src=""></script> -->

<!-- Recommended location for your JavaScript libraries -->

<!-- These library references (below) are just examples to give you the general idea... -->

<!-- <script src="lib/mc/hammer.js"></script> -->

<!-- <script src="lib/ft/fastclick.js"></script> -->

<!-- Uncomment this script element if you convert your "Cordova web app" to a "Standard HTML5 web app" -->


<script type="text/javascript" id="xdkJSdevBrowser_"> = || {} ; // object used by init-dev.js, which detects various ready events

dev.BROWSER = 500 ; // msecs, in non-Cordova app we don't care about "deviceready" events




* cordova.js is a phantom lib for "Cordova HTML5 web app," it does nothing in a "Standard HTML5 web app"

* Seeing a "Failed to load resource: net::ERR_FILE_NOT_FOUND" message caused by this "cordova.js" script?

* The cordova.js script is required if you convert your "Standard HTML5" project into a "Cordova" project.

* You can safely ignore the error or comment out this line if you will not be developing a Cordova app.


<script src="cordova.js" id="xdkJScordova_"></script>

<script src="js/app.js"></script>

<!-- for your event code, see README and file comments for details -->

<script src="js/init-app.js"></script>

<!-- for your init code, see README and file comments for details -->

<script src="xdk/init-dev.js"></script>

<!-- normalizes device and document ready events, see file for details -->

<script src="js/main.js"></script>


You may substitute jQuery for the App Framework selector library.



<script type="application/javascript" src="app_framework/appframework.js"></script>

<script type="application/javascript" src="app_framework/appframework.ui.js"></script>


<body id="afui" onload="onDocLoad()">

<!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! -->

<!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work above -->

<!-- <script src=""></script> -->

<div id="content" class="uwrap">

<div class="upage vertical-col left panel" id="mainpage" data-header="none" data-footer="none">

<div class="widget uib_w_1 d-margins iframe-size" data-uib="media/iframe" data-ver="0">

<iframe seamless="seamless" id="IDZ_iFrame" src=""></iframe>







0 Kudos

No, It dosent work. I have tried AppBrowser plugin too. 

     <script src="cordova.js"></script>
        function openwin(){
  '', '_blank', '');
    </script>      <button onclick="openwin()">window open</button>


Again I have added header in my aspx page, still same problem. 

  string fileName = "mmmmm.mp3";
            string filePath = Server.MapPath("~/mmmmm.mp3");
            Response.AddHeader("Access-Control-Allow-Origin", "*");
            Response.AppendHeader("Access-Control-Allow-Methods", "OPTIONS,POST,GET");
            Response.AppendHeader("Access-Control-Allow-Headers", "X-File-Name,X-File-Type,X-File-Size");
            Response.ContentType = "audio/mpeg";

            Response.AddHeader("content-disposition", "attachment; filename=" + fileName);



0 Kudos


please, kindly show the project sample that work for iframe. cos i am still finding difficulty using iframe.


thank you.


0 Kudos