你好stackoverflow社区，我有一个关于使用<object> html标签的问题。以下是我想要做的事情的描述：
我正在使用summernote编辑器，但是我希望编辑器中的每个更改都会以html页面的形式呈现给用户。我目前正在使用以下代码：
$('#summernote').summernote({
placeholder: 'Hello bootstrap 4',
tabsize: 2,
height: 300,
lang: 'pt-BR'
});
$("#summernote").on("summernote.change", function(e) { // callback as jquery custom event
console.log('it is changed');
myFunction();
});
var i = 0;
var dragging = false;
$('#dragbar').mousedown(function(e) {
e.preventDefault();
dragging = true;
var main = $('#main');
var ghostbar = $('<div>', {
id: 'ghostbar',
css: {
height: main.outerHeight(),
top: main.offset().top,
left: main.offset().left
}
}).appendTo('body');
$(document).mousemove(function(e) {
ghostbar.css("left", e.pageX + 2);
});
});
$(document).mouseup(function(e) {
if (dragging) {
var percentage = (e.pageX / window.innerWidth) * 100;
var mainPercentage = 100 - percentage;
$('#console').text("side:" + percentage + " main:" + mainPercentage);
$('#sidebar').css("width", percentage + "%");
$('#main').css("width", mainPercentage + "%");
$('#ghostbar').remove();
$(document).unbind('mousemove');
dragging = false;
}
});
function myFunction(data) {
var text = $('#summernote').summernote('code');
document.getElementById("demo").innerHTML = "<!DOCTYPE html><html><meta charset='UTF-8'>" + text + "</html>";
console.log(document.getElementById("demo"));
console.log(text);
}.clearfix:after {
content: '';
display: table;
clear: both;
}
#main {
float: right;
width: 50%;
}
#sidebar {
width: 50%;
float: left;
overflow-y: hidden;
}
#dragbar {
/*background-color: #a9a9a9;*/
background: transparent;
height: 100%;
float: right;
width: 3px;
cursor: col-resize;
}
#ghostbar {
width: 3px;
background-color: #a9a9a9;
opacity: 0.5;
position: absolute;
cursor: col-resize;
z-index: 999
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summernote Editor</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-bs4.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-bs4.js"></script>
<script src="summernote-pt-BR.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<!--<div id="summernote"></div>-->
<div id="sidebar" class="col">
<span id="position"></span>
<div id="dragbar">
</div>
sidebar
<form method="post">
<textarea id="summernote" name="editordata"></textarea>
<button type="submit" class="btn btn-primary">Salvar</button>
</form>
</div>
<div id="main">main
<p id="demo"></p>
</div>
</div>
</div>
</body>
</html>但是我没有使用<p>标签和innerHtml，而是想使用<object>标签，其内容每天都在更改。如果您有其他更好的解决方案，请随时提出建议。
注意：我已经尝试过使用标签，但不知何故使用此标签会阻碍我需要在编辑器和html查看器之间执行的调整大小。
注2：我是初学者，我的英语不好。如果出现问题没有意义，那就很抱歉。我用谷歌翻译来解释这个问题。
嗨拉斐尔 - 谢谢你的澄清。
您的代码在iframe或对象标记中看起来不同的原因是由于CSS不同。当您使用iframe并动态设置源时，CSS来自用户代理样式表。标记不会继承父级的样式。目前，p标签中的CSS来自Bootstrap 4。
选项1：您可以自定义此元素上的CSS，使其在非Bootstrap上下文中显示一致。
选项2：如果您仍想更改标签，我认为您最好使用iframe而不是object标签，根据MDN文档和this SO thread的讨论。
将<p id="demo"></p>改为<iframe id="demo"></iframe>，将你的myFunction改为：
function myFunction(data) {
var text = $('#summernote').summernote('code');
var frame=document.getElementById("demo");
frame.srcdoc="<!DOCTYPE html><html><meta charset='UTF-8'>" + text + "</html>";
}
如果您支持IE11，Edge和Opera Mini（srcdoc is not supported there），您可以使用polyfill。
这条路线的最后一个考虑因素是性能 - 我在这方面找不到多少，但我怀疑设置p标签的innerHTML要比重新渲染iframe便宜得多。如果这成为问题，您可能需要调查并考虑减少更新间隔。