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

【问题标题】：Loading iframe in modal, .modal-content is replaced以模态加载 iframe，替换 .modal-content
【发布时间】：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/" width="100%" height="380" 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 中的所有内容？

【问题讨论】：

标签： javascript jquery twitter-bootstrap iframe

【解决方案1】：

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

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

【讨论】：