在javascript中用iframe替换div

Posted 2021-03-29

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在javascript中用iframe替换div相关的知识，希望对你有一定的参考价值。

我在页面上有一个div，例如：

<div>
   <p>This is a div, but it should be an iframe.</p>
   <p>Here, all kind of stuff could be inside.</p>
   <table>
     <tr>
       <td>something</td>
     </tr>
   </table>
</div>

我想用iframe替换div，得到类似的东西：

<iframe>
   <html><body>
   <p>This is a div, but it should be an iframe.</p>
   <p>Here, all kind of stuff could be inside.</p>
   <table>
     <tr>
       <td>something</td>
     </tr>
   </table>
   </body></html>
</iframe>

怎么做到呢？一个纯粹的javascript解决方案是最好的，但是使用JJery的ExtJs的解决方案也可以。

答案

试试这个：

<!DOCTYPE html>
<html>
    <head>
        <script>
            var p = {
                onload: function() {
                    var div = document.getElementById("div");
                    var iframe = document.createElement("iframe");
                    document.body.appendChild(iframe);
                    iframe.innerHTML = div.innerHTML;
                    div.parentNode.removeChild(div);
                }
            };
        </script>
    </head>
    <body onload="p.onload()">
        <div id="div">
            <p>This is a div, but it should be an iframe.</p>
            <p>Here, all kind of stuff could be inside.</p>
            <table>
                <tr>
                    <td>something</td>
                </tr>
            </table>
        </div>
    </body>
</html>

另一答案

既然你说jQuery解决方案是可以接受的，那么这个怎么样：

首先，让我们假设您的div的id为remove-my-contents。

接下来，我们可以做到

$('#remove-my-contents').html('your iframe code goes here');

它不会删除<div>但它确实用你的<iframe>代码替换它的内容。

希望这可以帮助。

另一答案

啊，这似乎是firefox的一个问题，iframe一直保持空白。见：Replace div with iframe in javascript

以上是关于在javascript中用iframe替换div的主要内容，如果未能解决你的问题，请参考以下文章

如何在 ng-bootstrap 轮播中用 div 替换图像？

iframe如何使用javascript替换内容？