Fatal编程技术网
  • jquery/
  • 无法使用jquery在弹出窗口中打开iframe

无法使用jquery在弹出窗口中打开iframe

jquery google-maps iframe

无法使用jquery在弹出窗口中打开iframe,jquery,google-maps,iframe,popup,Jquery,Google Maps,Iframe,Popup,我正在尝试使用jquery在弹出窗口中加载iframe。 我使用了这个链接中提到的例子。 但是，iframe在同一窗口中加载，而不是在演示中显示的弹出窗口中加载 我的html文件是 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Demo</title> <link rel="stylesheet" type="text/css" href="ma

我正在尝试使用jquery在弹出窗口中加载iframe。 我使用了这个链接中提到的例子。 但是，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.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以在弹出窗口中加载google方向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>
只需将jQuery和jQuery mobile添加到HTML中：

<!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>
谢谢，马克西姆。我对jquery非常陌生，所以我很难理解基本知识。我的要求是在弹出窗口中加载GoogleDirections 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>