我正在尝试将div标签添加到body标签。在div标签内部,我正在使用iframe。这是我的代码:
<script>
(function() {
var div = document.createElement("div");
document.getElementsByTagName('body')[0].appendChild(div);
div.outerHTML = "<div id='botDiv' style='height: 38px; position: fixed; bottom: 0; z-index: 1000; background-color: #fff'><div id='botTitleBar' style='height: 38px; width: 400px; position:fixed; cursor: pointer;'></div><iframe width='400px' height='600px' src='https://SitePages/botchat.html'></iframe></div>";
document.querySelector('body').addEventListener('click', function(e) {
e.target.matches = e.target.matches || e.target.msMatchesSelector;
if (e.target.matches('#botTitleBar')) {
var botDiv = document.querySelector('#botDiv');
botDiv.style.height = botDiv.style.height == '600px' ? '38px' : '600px';
};
});
}());
</script>
答案 0 :(得分:0)
使用``反引号作为externalHTML的字符串
(function() {
var div = document.createElement("div");
document.getElementsByTagName('body')[0].appendChild(div);
div.outerHTML = `<div id='botDiv' style='height: 38px; position: fixed; bottom: 0; z-index: 1000; background-color: #fff'>
<div id='botTitleBar' style='height: 38px; width: 400px; position:fixed; cursor: pointer;'></div>
<iframe width='400px' height='600px' src='https://SitePages/botchat.html'></iframe></div>`;
document.querySelector('body').addEventListener('click', function(e) {
e.target.matches = e.target.matches || e.target.msMatchesSelector;
if (e.target.matches('#botTitleBar')) {
var botDiv = document.querySelector('#botDiv');
botDiv.style.height = botDiv.style.height == '600px' ? '38px' : '600px';
};
});
}());
<body></body>