無法使用jquery在彈出框中打開iframe

我想在使用jquery的彈出窗口中加載iframe。我用這個鏈接中提到的例子。 http://demos.jquerymobile.com/1.4.0/popup-iframe/ 但是，iframe被加載到相同的窗口中，而不是在演示中顯示的彈出窗口中。無法使用jquery在彈出框中打開iframe

我的html文件是

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Demo</title> 
<link rel="stylesheet" type="text/css" href="main.css"> 
<script type="text/javascript" src="main.js"></script> 
</head> 
<body> 
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline" href="#popupMap" data-position-  to="window" data-rel="popup">Open Map</a> 
<div id="popupMap" data-role="popup" data-tolerance="15,15" data-theme="a" data-overlay-theme="a" data-corners="false"> 
<a class="ui-btn ui-btn-b ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right" href="#" data-rel="back">Close</a> 
<iframe width="480" height="320" src="map.html" seamless=""></iframe> 
</div> 
</body> 
</html>

我的main.css文件

iframe { 
border: none; 
}

我main.js文件是

// popup examples 
$(document).on("pagecreate", function() { 
// The window width and height are decreased by 30 to take the tolerance of 15 pixels at each side into account 
function scale(width, height, padding, border) { 
    var scrWidth = $(window).width() - 30, 
     scrHeight = $(window).height() - 30, 
     ifrPadding = 2 * padding, 
     ifrBorder = 2 * border, 
     ifrWidth = width + ifrPadding + ifrBorder, 
     ifrHeight = height + ifrPadding + ifrBorder, 
     h, w; 
    if (ifrWidth < scrWidth && ifrHeight < scrHeight) { 
     w = ifrWidth; 
     h = ifrHeight; 
    } else if ((ifrWidth/scrWidth) > (ifrHeight/scrHeight)) { 
     w = scrWidth; 
     h = (scrWidth/ifrWidth) * ifrHeight; 
    } else { 
     h = scrHeight; 
     w = (scrHeight/ifrHeight) * ifrWidth; 
    } 
    return { 
     'width': w - (ifrPadding + ifrBorder), 
     'height': h - (ifrPadding + ifrBorder) 
    }; 
}; 
$(".ui-popup iframe") 
    .attr("width", 0) 
    .attr("height", "auto"); 
$("#popupMap iframe").contents().find("#map_canvas") 
    .css({ "width" : 0, "height" : 0 }); 
$("#popupMap").on({ 
    popupbeforeposition: function() { 
     var size = scale(480, 320, 0, 1), 
      w = size.width, 
      h = size.height; 
     $("#popupMap iframe") 
      .attr("width", w) 
      .attr("height", h); 
     $("#popupMap iframe").contents().find("#map_canvas") 
      .css({ "width": w, "height" : h }); 
    }, 
    popupafterclose: function() { 
     $("#popupMap iframe") 
      .attr("width", 0) 
      .attr("height", 0); 
     $("#popupMap iframe").contents().find("#map_canvas") 
      .css({ "width": 0, "height" : 0 }); 
    } 
}); 
});

我已經使用了完全相同的map.html如鏈接中所提供的。

如前所述，問題是我無法在彈出窗口中加載iframe。而是在加載頁面期間加載iframe，在按鈕下方加載。

上述問題解決後更新。如何修改iframe中加載谷歌的方向IFRAME，在彈出的這是我想用

<iframe width="480" height="320" src="https://www.google.com/maps/embed/v1/place?key=API_KEY=Space+Needle,Seattle+WA" seamless=""></iframe>

來源

2014-10-05 BKSingh

只需添加的jQuery和jQuery移動到你的HTML iframe標籤：

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Demo</title> 
<link rel="stylesheet" type="text/css" href="main.css"> 

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> 

<script type="text/javascript" src="main.js"></script> 
</head> 
<body> 
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline" href="#popupMap" data-position-  to="window" data-rel="popup">Open Map</a> 
<div id="popupMap" data-role="popup" data-tolerance="15,15" data-theme="a" data-overlay-theme="a" data-corners="false"> 
<a class="ui-btn ui-btn-b ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right" href="#" data-rel="back">Close</a> 
<iframe width="480" height="320" src="map.html" seamless=""></iframe> 
</div> 
</body> 
</html>

來源

2014-10-05 19:42:50 MaximOrlovsky

感謝馬克西姆。我對jquery很新，所以很難理解基礎知識。我的要求是在彈出窗口中加載谷歌方向iframe。我在這個問題中增加了關於它的細節。 – BKSingh 2014-10-06 11:02:30

無法使用jquery在彈出框中打開iframe

回答

相關問題