Jquery 如何制作预览网页应用程序

我想制作一个只有一个文本字段和一个预览按钮的简单应用程序

它应该在同一页上的div中显示该页的预览。请查看blow代码以获得确切的想法

    <form method="POST" action="" id="preview-form" >
        <input type="text" id="urltopreview" name="urltopreview" />
        <input type="button" id="preview-button" value="Preview">
        <div id="preview"></div>
   </form>

当我插入URL并单击Preview按钮时，它应该使用jquery和ajax在div中加载该页面的预览（having id=“Preview”）

我试图使用php函数文件_get_contents（）来生成预览，但我得到了损坏的图像

---

有什么想法吗？

您可以使用隐藏的Iframe并将其源设置为文本框中输入的url。然后，获取iframe的内容并将其附加到preview div中

function getContentFromIframe(iFrameName)
{

     var myIFrame = document.getElementById(iFrameName);
     var content = myIFrame.contentWindow.document.body.innerHTML;

     $("#preview").html(content);

}

或

要加载内部页面，请执行以下操作： 您可以使用Jquery方法load（）

---

此Jquery方法无法加载外部页面，因为出于安全原因，ajax调用无法检索外部页面。将外部页面添加到页面上的唯一方法是使用iframe，或者可以使用ajax调用的服务器端代理。

非常简单。。网页不仅意味着标记，还意味着它的所有javascript和css文件。您应该尝试在页面中创建iframe，并将其src属性设置为urlyes我也尝试了iframe，但无法动态分配src。。在获得预览后，我想动态更改背景图像，我认为基于IFRAME的解决方案对我没有帮助。你能添加更多细节吗？php代码。。。文件的路径。。file permission.place runat=“server”在iframe元素上。就改变你在iframe中打开的网站的背景而言，这听起来很棘手。。为了更改背景，您必须在加载到iframe的html中插入一些javascript代码来设置其背景。。在我看来，不同的网站有不同的方式来设置他们网站的背景。。设置其他网站的背景似乎不切实际。我想使用div而不是IFRAME，因为我需要动态更改预览的CSS属性。我尝试了提供的代码，但页面加载时出现了损坏的图像，还有其他想法吗？谢谢Thomas，是的，我正在尝试加载外部页面。你能告诉我如何加载外部页面吗？不，我必须使用HTML、JQUERY和PHP

 $("#preview").load($('#urltopreview').val());