Question

HTML：

<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
    <link href="css/jquery.mobile-1.4.1.min.css" rel="stylesheet">
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/jquery.mobile-1.4.1.min.js"></script>
    <script src="js/index.js"></script>

</head>
<body>
    <div data-role="page" id="demo-page" data-url="demo-page">
        <iframe id="iframe1" src="" width="100%" height="300">
        </iframe>   
        <div role="main" class="ui-content" id="div-content">
            <h1>Panel responsive</h1>
            <p>This is a typical page that has two buttons in the header bar that open panels. The left panel has the push display mode, the right panel reveal. To make this responsive, you can make the page re-flow at wider widths. This allows both the panel menu and page to be used together when more space is available. This behavior is controlled by CSS media queries.</p>
        </div>
    </div>
</body>
</html>

JS

<script>
    $(document).ready(function(){
        $("#iframe1").attr('src','#div-content');
    });
</script>

Here my Jsfiddle Example

我的问题是，我只想在<div>中加载<iframe>个内容。但就我而言，当我在<div>中加载<iframe>内容时，会在<iframe>中加载额外的内容。

如果有人对此问题有任何疑问，请帮助我。

Answer 1

试试这个：

$('#iframe1').contents().find('html').html($('#div-content').html());

或

$('#iframe1').contents().find('body').html($('#div-content').html());

Answer 2

试试这个。

$(document).ready(function(){
        $('#iframe1').contents().find('body').append($('#div-content'));
  });

Fiddle Demo

<div>内容未在<iframe> </iframe> </div>中加载

2 个答案: