如何防止在我的引导模式中加载的 html 影响我的页面 html？
Posted
技术标签:
【中文标题】如何防止在我的引导模式中加载的 html 影响我的页面 html？【英文标题】：How can I prevent the html loaded within my bootstrap modal from affecting my page html? 【发布时间】：2016-12-18 20:39:36 【问题描述】：我正在将完整的 html 电子邮件（带有打开和关闭 html 标签）加载到我的模式中以进行预览。像这样：
//Update modal body
$('.modal-body').html(response['html']);
我遇到的问题是，当我这样做时，加载的 html 似乎（不出所料）改变了模式之外的主页内容。
我想知道是否有一种方法可以将 html 隔离到模式区域，这样它就不会影响主页的 html。
我已经考虑使用 iframe 作为替代方案，但对我来说，问题是我正在通过 ajax（以及其他数据）加载这些数据，而 iframe 似乎只支持通过链接提取信息苍蝇。
我会很感激这里的任何潜在解决方案。
谢谢！
【问题讨论】：
可能重复：***.com/questions/16504816/… 和/或***.com/questions/8226307/… 这些解决方案对我来说不起作用。 iframe 似乎没有加载必要的 html。 【参考方案1】：塔帕：
您可以尝试以下代码，而不是 Jquery：
<div>
<object type="text/html" data="http://www.google.com/" style="overflow:auto;border:5px ridge blue">
</object>
</div>
希望这会有所帮助！
【讨论】：
【参考方案2】：由于存在任何沙盒，这些可能无法在此处运行，但在本地对我有用。
var target = document.getElementById('target');
var targetDoc = target.contentWindow.document;
targetDoc.open('text/htmlreplace');
targetDoc.write("<html><body>Hello world</body></html>");
targetDoc.close();<iframe id="target"></iframe>同样如此：
var target = document.getElementById('target');
target.src = "javascript:'<html><body>Hello world</body></html>'";<iframe id="target"></iframe>虽然我认识到第二个示例可能难以明智地管理报价。
这是一个完整的工作引导示例。好吧，它在本地工作，但同样，不在这个沙箱中。
var target = document.getElementById('target');
var targetDoc = target.contentWindow.document;
targetDoc.open('text/htmlreplace');
targetDoc.write("<html><body>Hello world</body></html>");
targetDoc.close();<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<iframe id="target"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>虽然它在沙箱中失败了，但它在本地渲染是这样的......
【讨论】：
问题就在这里（我刚刚测试过），当加载数据 html 时，主 html 仍在更改。 此时你的模态体应该只是静态的 iframe 对吧？您不再更新模态正文，而是在正文中设置静态 iframe。以上是关于如何防止在我的引导模式中加载的 html 影响我的页面 html？的主要内容，如果未能解决你的问题，请参考以下文章