Fatal编程技术网

在javascript中用iframe替换div

javascript dom html

在javascript中用iframe替换div,javascript,dom,html,Javascript,Dom,Html,我在页面上有一个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> <

我在页面上有一个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>


这是一个div，但它应该是一个iframe

在这里，各种各样的东西都可能在里面

某物
我想用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>


这是一个div，但它应该是一个iframe

在这里，各种各样的东西都可能在里面

某物
怎样才能做到呢？一个纯javascript解决方案最好，但是一个带有jquery的ExtJs解决方案也可以。

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

首先，假设您的div的id为
remove my contents

接下来，我们可以做什么

$（'#删除我的内容'）.html（'您的iframe代码在这里'）

它不会删除
，但会将其内容替换为您的
代码

希望这有帮助。
试试这个：


<!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> 




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）；
}
};
这是一个div，但它应该是一个iframe

在这里，各种各样的东西都可能在里面

某物

啊，firefox的iframe一直保持空状态似乎是个问题。见：

如果确实要替换整个
元素，请使用
.replaceWith（）
而不是
.html（）
，谢谢您的回复。奇怪的是，这也没有任何效果：var iframe=document.createElement（“iframe”）；iframe.id=“新建iframe”$（“#new_iframe”）.html（“Works
”）；最终得到一个空的iframe（）。。。。为什么？仅仅在
上设置
溢出：auto
有什么不对？因此，页面上有一些内容，您希望将其转换为没有
src
的iframe的替代内容？（我怀疑情况并非如此）。你能澄清一下你到底想要什么，让我们知道你想用这种方法解决什么问题吗？问题是我需要对div应用一个与页面其余部分完全不同的css文件：页面css文件不应该在div内有效，而div的css文件在页面上也不应该有效。如果您使用ExtJs或Tinymce并将其与页面的css混淆，这可能会导致问题。我想在这里写一个通用的工具，不知道如果写的话页面的css是怎么写的。我可以将iframe与src一起使用，但是这使得加载速度非常慢，所以我认为将div与页面一起加载，然后将其转换为iframe可能是一个好主意。感谢这个解决方案。它在文档的末尾创建iframe，但它仍然是空的（只有一个）。即使使用诸如：iframe.innerHTML=“它可以工作”
“之类的东西似乎也没有任何效果。