如何在引导程序 2 模式中更改 iframe html答案

【问题标题】：how to change iframe html within a bootstrap 2 modal如何在引导程序 2 模式中更改 iframe html
【发布时间】：2015-09-04 10:43:50
【问题描述】：

我有权更改与 iframe src 位于同一域但不在 iframe 内容本身中提供的 JS 文件。我想我必须等到 iframe 加载后才能更改 html，但我尝试的一切似乎都失败了。

当一个 ID 为“body_btnrewardsmodal”的按钮被点击时，模态被打开。

这是我失败的尝试。

HTML：

<div id="ajax-rewards-modal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="h3RewardsTitle" aria-hidden="false" style="display: block;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="h3RewardsTitle">donut</h3>
    </div>
    <div class="modal-body">
        <div id="divgiveafew">
            <iframe>
               <!DOCTYPE html>
               <html class="phone desktop-device firefox">
               <head></head>
               <body class="PopupWindow" onload="window.focus();">
               <div class="row">
                 <div class="span02">
                   text
                 </div>
               </div>
             </body>
             </html>
            </iframe>
        </div>
    </div>
</div>

JS：

$(document).on('click', '#body_btnrewardsmodal', function() {
    $('#divgiveafew iframe').load(function(){
        if ($('#divgiveafew iframe').contents().find('body').children().length > 0) {
            console.log('loaded');
            $('this').contents().find('.span02').prepend('<div class="alert alert-info" class="padding:8px;"><p style="margin:0">Some text</p> <ul class="unstyled inline"><li>#courageous</li><li>#innovative</li><li>#passionate</li><li>#adaptable</li><li>#honest</li><li>#thinkbig</li></ul></div>');
        } else {
            console.log('not loaded');
        }
    });
});

【问题讨论】：

感谢@Zl3n 我需要向嵌套在模式中的 iframe 中的 div / 类 (.span02) 添加一些 html。我可能把这一切都编码错了:(
我现在想要什么？不知道我还能说什么？我想通过 JS 更改 iframe html，但它不起作用（如上）。
请编辑您的帖子并告诉我 iframe 中的代码是什么。我不清楚那里
这有帮助吗？谢谢
no modal 和 iframe 已经存在并且工作正常。我想用js来改变iframe中的html。 iframe src中没有使用js文件，但iframe src在同一个域中。

标签： javascript jquery iframe modal-dialog

【解决方案1】：

使用您的 HTML，您已经调用了模式。然后当模态为shown 时，您必须添加一个事件。在那里，您构建要插入 iframe 的 div。

最后，当您处于模态时，您搜索 iframe，获取其内容并添加您刚刚构建的内容。

$(this).find('iframe').contents().prepend(alert);

HTML 重做：

<div id="ajax-rewards-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="h3RewardsTitle" aria-hidden="false" style="display: block;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="h3RewardsTitle">donut</h3>
    </div>
    <div class="modal-body">
        <div id="divgiveafew">
            <iframe src="https://fortawesome.github.io/Font-Awesome/"></iframe>
        </div>
    </div>
</div>

<!-- Button to open the modal -->
<a href="#ajax-rewards-modal" role="button" class="btn btn-info" data-toggle="modal">Open modal</a>

还有 JS：

$(document).ready(function () {

    $('#ajax-rewards-modal').on('shown', function () {

        var alert = $('<div>', {'class' : 'alert alert-info', 'css' : {'padding' : '8px'}});
        $('<p>', {'css' : {'margin' : 0}, 'text' : 'Some Text'}).appendTo(alert);
        var ul = $('<ul>', {'class' : 'unstyled inline'}).appendTo(alert);
        $('<li>', {'text' : '#courageous'}).appendTo(ul);
        $('<li>', {'text' : '#innovative'}).appendTo(ul);
        $('<li>', {'text' : '#passionate'}).appendTo(ul);
        $('<li>', {'text' : '#adaptable'}).appendTo(ul);
        $('<li>', {'text' : '#honest'}).appendTo(ul);
        $('<li>', {'text' : '#thinkbig'}).appendTo(ul);

        $(this).find('iframe').contents().prepend(alert);
    });
});

【讨论】：