Question

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

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

    <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并单击预览按钮时，它应该使用jquery＆amp ;;加载div中的页面预览（具有id =“preview”）。 AJAX。

我尝试使用php函数file_get_contents（）来生成预览，但是我得到了破碎的图像。

有什么想法吗？

Answer 1

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

function getContentFromIframe(iFrameName)
{

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

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

}

OR

要加载内部页面：您可以使用Jquery方法load（）

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

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

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

1 个答案: