以模态加载 iframe，替换 .modal-content

Posted 2023-05-09

【中文标题】以模态加载 iframe，替换 .modal-content

【英文标题】：Loading iframe in modal, .modal-content is replaced

【发布时间】：2015-08-17 10:33:45

【问题描述】：

我有以下 html：

<a href="http://domainx.com/" class="btn btn-primary" data-toggle="modal" data-target="#myModal">LINKY</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                <iframe src="http://domainy.com/"   frameborder="0"
                        allowtransparency="true"></iframe>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

当我使用以下 JS 更改模态 iframe src 时，.modal-content 的内容被从切换模态的按钮上的相关 HREF 加载的 HTML 完全覆盖。

$('[data-target="#myModal"]').on('click', function (e) 
    e.preventDefault();

    var _linky = $(this).attr('href');
    var _target = $(this).data('target');

    if (_target.length > 0) 
        _target.find('iframe').attr('src', 'about:blank');

        var _isRemote = false;
        if (_linky.indexOf('http') > -1) 
            _isRemote = true;
        

        if (!_isRemote) 
            if (_linky.indexOf('?') > -1) 
                _linky += '&tmpl=component';
             else 
                _linky += '?tmpl=component';
            
        

        _target.find('iframe').attr('src', _linky).load(function() 
            _target.modal('show');
        );
    
);

$('body').on('hidden.bs.modal', '.modal', function () 
    $(this).removeData('bs.modal');
);

如何防止 Bootstrap 替换 .modal-content 中的所有内容？

【参考方案1】：

_target 是一个简单的字符串值，表示元素 ID，而不是 jQuery 对象。

代码已修复和更新：http://codepen.io/TheFoot/pen/QbpMYx