堆棧內存溢出
  簡體   English   中英

使用JavaScript在div中呈現整個頁面的HTML

[英]Render whole page HTML in a div using Javascript

 原文  2016-07-15 09:43:18  8   1    javascript/ jquery/ html/ innerhtml

問題描述

我有一個包含滑塊的URL（ http://www.basic-slider.com/ ）。 我想要的是通過轉義將整個頁面內容包含在javascript變量中，然后通過innerHTML或jQuery .html函數將此內容放在我的空body標簽中。

只是將代碼放在body標簽中，但是它不能像原始頁面那樣工作。 我必須顯示它與原始頁面完全相同。

我不能使用iframe或任何XMLHTTP方法。 以下是上述對應網址的代碼： 

    <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="jquery-2.2.4.min.js"></script>
<script src="mustache.js"></script>
<script>
var strVar="";
strVar += "<!DOCTYPE html>";
strVar += "<!--[if lt IE 7]>      <html class=\"no-js lt-ie9 lt-ie8 lt-ie7\"> <![endif]-->";
strVar += "<!--[if IE 7]>         <html class=\"no-js lt-ie9 lt-ie8\"> <![endif]-->";
strVar += "<!--[if IE 8]>         <html class=\"no-js lt-ie9\"> <![endif]-->";
strVar += "<!--[if gt IE 8]><!--> <html class=\"no-js\"> <!--<![endif]-->";
strVar += " <head>";
strVar += "     <meta charset=\"utf-8\">";
strVar += "     <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">";
strVar += "     <title>Basic jQuery Slider - Responsive slideshows for featured content<\/title>";
strVar += "     <meta name=\"description\" content=\"A simple, no-frills, robust jQuery plugin for creating simple, responsive slideshows for your featured content. Simple to use, theme and customise.\">";
strVar += "     <link href='http:\/\/fonts.googleapis.com\/css?family=Source+Code+Pro|Coda|Open+Sans:400,700' rel='stylesheet' type='text\/css'>";
strVar += "     <link href=\"\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.1.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">";
strVar += "     <link rel=\"stylesheet\" href=\"css\/bootstrap.min.css\">";
strVar += "     <style>";
strVar += "         body {";
strVar += "             padding-top: 60px;";
strVar += "             padding-bottom: 40px;";
strVar += "         }";
strVar += "     <\/style>";
strVar += "     <link rel=\"stylesheet\" href=\"http://www.basic-slider.com\/css\/main.css\">";
strVar += "     <link rel=\"stylesheet\" href=\"http://www.basic-slider.com\/css\/prism.css\">";
strVar += "";
strVar += "     <script src=\"http://www.basic-slider.com\/js\/vendor\/modernizr-2.6.1-respond-1.1.0.min.js\"><\/script>";
strVar += " <\/head>";
strVar += " <body>";
strVar += "";
strVar += "     <div class=\"container\">";
strVar += "         <div class=\"row\">";
strVar += "             <header class=\"span12\">";
strVar += "                 <h1>Basic jQuery Slider<\/h1>";
strVar += "                 <h2>Simple to use, simple to theme, simple to customise<\/h2>";
strVar += "             <\/header>";
strVar += "             <div class=\"span12\" id=\"slider\">";
strVar += "                 <ul class=\"bjqs\">";
strVar += "                 <li><img src=\"img\/banner01.jpg\" title=\"Automatically generated caption\"><\/li>";
strVar += "                 <li><img src=\"img\/banner02.jpg\" title=\"Automatically generated caption\"><\/li>";
strVar += "                 <li><img src=\"img\/banner03.jpg\" title=\"Automatically generated caption\"><\/li>";
strVar += "                 <\/ul>";
strVar += "             <\/div>";
strVar += "<div class=\"span12 leaderboard-ad\">";
strVar += "<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>";
strVar += "<!-- Leaderboard -->";
strVar += "<ins class=\"adsbygoogle\"";
strVar += " style=\"display:inline-block;width:728px;height:90px\"";
strVar += " data-ad-client=\"ca-pub-7070404889996835\"";
strVar += " data-ad-slot=\"7960663502\"><\/ins>";
strVar += "<script>";
strVar += "(adsbygoogle = window.adsbygoogle || []).push({});";
strVar += "<\/script>";
strVar += "<\/div>";
strVar += "             <div class=\"span12 text\">";
strVar += "                 <h3>Purpose<\/h3>";
strVar += "";
strVar += "                 <p>There are a lot of jQuery content sliders out there. Most of them are loaded with cool features and skins, which are great if it is exactly what you are looking for, but more often than not you need to customise it for your own needs and it can be difficult cutting through the bloat of a full featured slider.<\/p>";
strVar += "";
strVar += "                 <p>Basic jQuery Slider has been developed to be as simple and lightweight as possible. Only the essential functionality has been included combined with clean semantic mark-up. This means instead of removing features and bending it to suit your needs, you can use this slider and as a base and with a little bit of CSS and JavaScript knowledge, you can extend it to be as feature rich, or as simple, as you need.<\/p>";
strVar += "";
strVar += "                     <h3>Download<\/h3>";
strVar += "";
strVar += "                 <section class=\"clearfix\">";
strVar += "                     <div class=\"download\">";
strVar += "                         <p>You can download the plugin for free, however if you'd like to support the ongoing hosting and development of the plugin, you can optionally purchase it for $3 - the cost of your morning coffee :)<\/p>";
strVar += "";
strVar += "                         <div class=\"buttons\">";
strVar += "                             <a class=\"btn btn-success\" style=\"font-size: 20px; padding: 20px;\" href=\"https:\/\/gumroad.com\/l\/XsbID\"><i class=\"fa fa-smile-o\"><\/i> Download with donation<\/a>";
strVar += "                             <a style=\"display: block; padding: 20px; text-align: center;\" href=\"http:\/\/github.com\/jcobb\/basic-jquery-slider\/\"><i class=\"icon-download-alt icon-white\"><\/i> Download for Free<\/a>";
strVar += "                         <\/div>";
strVar += "                     <\/div>";
strVar += "";
strVar += "                 <div class=\"ad-space\">";
strVar += "";
strVar += "";
strVar += "                     ";
strVar += "<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>";
strVar += "<!-- LREC -->";
strVar += "<ins class=\"adsbygoogle\"";
strVar += " style=\"display:inline-block;width:336px;height:280px\"";
strVar += " data-ad-client=\"ca-pub-7070404889996835\"";
strVar += " data-ad-slot=\"2053730701\"><\/ins>";
strVar += "<script>";
strVar += "(adsbygoogle = window.adsbygoogle || []).push({});";
strVar += "<\/script>";
strVar += "                 <\/div>";
strVar += "                 <\/section>";
strVar += "";
strVar += "                 <h3 style=\"clearfix\">Usage<\/h3>";
strVar += "";
strVar += "                 <h5>Plugin dependancies<\/h5>";
strVar += "";
strVar += "                 <p>There are two core files required to get up and running with Basic jQuery Slider, the JavaScript plugin and the base css.  The only dependancy is jQuery, so you will also need to make sure you have the latest version of the jQuery library included in your page. <\/p>";
strVar += "";
strVar += "                 <pre><code class=\"language-markup\">&lt;!-- Include the jQuery library (local or CDN) --&gt;";
strVar += "&lt;script src=\"http:\/\/code.jquery.com\/jquery-latest.min.js\"&gt;&lt;\/script&gt;";
strVar += "";
strVar += "&lt;!-- Include the plugin *after* the jQuery library --&gt;";
strVar += "&lt;script src=\"bjqs.min.js\"&gt;&lt;\/script&gt;";
strVar += "";
strVar += "&lt;!-- Include the basic styles --&gt;";
strVar += "&lt;link type=\"text\/css\" rel=\"Stylesheet\" href=\"bjqs.css\" \/&gt;<\/code><\/pre>";
strVar += "";
strVar += "                 <h5>Markup<\/h5>";
strVar += "";
strVar += "                 <p>The basic markup for the plugin is as follows.<\/p>";
strVar += "";
strVar += "                 <ul>";
strVar += "                     <li>An outer container which the plugin will be attached to,<\/li>";
strVar += "                     <li>An unordered list element with a class name of bjqs, and<\/li>";
strVar += "                     <li>Individual list elements for each slide.<\/li>";
strVar += "                 <\/ul>";
strVar += "<pre><code class=\"language-markup\">&lt;div id=\"my-slideshow\"&gt;";
strVar += " &lt;ul class=\"bjqs\"&gt;";
strVar += "     &lt;li&gt;&lt;!-- Any content you like --&gt;&lt;\/li&gt;";
strVar += "     &lt;li&gt;&lt;!-- Can go inside these slides--&gt;&lt;\/li&gt;";
strVar += " &lt;\/ul&gt;";
strVar += "&lt;\/div&gt;<\/code><\/pre>";
strVar += "";
strVar += "                 <h5>Activation<\/h5>";
strVar += "                 <p>The final step is to invoke the plugin and attach it to the outer-most dom element. You can then pass in a variety of key : value pairs to configure the slider.<\/p>";
strVar += "";
strVar += "<pre><code class=\"language-javascript\">jQuery(document).ready(function($) {";
strVar += " $('#banner-fade').bjqs({";
strVar += "     'height' : 320,";
strVar += "     'width' : 620,";
strVar += "     'responsive' : true";
strVar += " });";
strVar += "});";
strVar += "<\/code><\/pre>";
strVar += "";
strVar += "<div class=\"span12 leaderboard-ad\">";
strVar += "<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>";
strVar += "<!-- Leaderboard Bottom -->";
strVar += "<ins class=\"adsbygoogle\"";
strVar += " style=\"display:inline-block;width:728px;height:90px\"";
strVar += " data-ad-client=\"ca-pub-7070404889996835\"";
strVar += " data-ad-slot=\"3251262300\"><\/ins>";
strVar += "<script>";
strVar += "(adsbygoogle = window.adsbygoogle || []).push({});";
strVar += "<\/script>";
strVar += "<\/div>";
strVar += "";
strVar += "                 <h3>Options<\/h3>";
strVar += "";
strVar += "                 <p>Here is a full list of all the possible parameters which can used to configure the plugin and their default values.<\/p>";
strVar += "                 <pre><code class=\"language-javascript\">\/\/ width and height need to be provided to enforce consistency";
strVar += "\/\/ if responsive is set to true, these values act as maximum dimensions";
strVar += "width : 700,";
strVar += "height : 300,";
strVar += "";
strVar += "\/\/ animation values";
strVar += "animtype : 'fade', \/\/ accepts 'fade' or 'slide'";
strVar += "animduration : 450, \/\/ how fast the animation are";
strVar += "animspeed : 4000, \/\/ the delay between each slide";
strVar += "automatic : true, \/\/ automatic";
strVar += "";
strVar += "\/\/ control and marker configuration";
strVar += "showcontrols : true, \/\/ show next and prev controls";
strVar += "centercontrols : true, \/\/ center controls verically";
strVar += "nexttext : 'Next', \/\/ Text for 'next' button (can use HTML)";
strVar += "prevtext : 'Prev', \/\/ Text for 'previous' button (can use HTML)";
strVar += "showmarkers : true, \/\/ Show individual slide markers";
strVar += "centermarkers : true, \/\/ Center markers horizontally";
strVar += "";
strVar += "\/\/ interaction values";
strVar += "keyboardnav : true, \/\/ enable keyboard navigation";
strVar += "hoverpause : true, \/\/ pause the slider on hover";
strVar += "";
strVar += "\/\/ presentational options";
strVar += "usecaptions : true, \/\/ show captions for images using the image title tag";
strVar += "randomstart : true, \/\/ start slider at random slide";
strVar += "responsive : true \/\/ enable responsive capabilities (beta)<\/code><\/pre>";
strVar += "";
strVar += "             <\/div>";
strVar += "         <\/div>";
strVar += "     <\/div>";
strVar += " ";
strVar += "";
strVar += "     <script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.2\/jquery.min.js\"><\/script>";
strVar += "     <script>window.jQuery || document.write('<script src=\"http://www.basic-slider.com\/js\/vendor\/jquery-1.8.2.min.js\"><\\/script>')<\/script>";
strVar += "";
strVar += "     <script src=\"http://www.basic-slider.com\/js\/vendor\/bootstrap.min.js\"><\/script>";
strVar += "     <script src=\"http://www.basic-slider.com\/js\/bjqs-1.3.min.js\"><\/script>";
strVar += "     <script src=\"http://www.basic-slider.com\/js\/main.js\"><\/script>";
strVar += "             <script src=\"http://www.basic-slider.com\/js\/vendor\/prism.js\"><\/script>";
strVar += "";
strVar += "<!-- TEH GOOGLES -->";
strVar += "<script type=\"text\/javascript\">";
strVar += "";
strVar += " var _gaq = _gaq || [];";
strVar += " _gaq.push(['_setAccount', 'UA-25642114-1']);";
strVar += " _gaq.push(['_trackPageview']);";
strVar += "";
strVar += " (function() {";
strVar += " var ga = document.createElement('script'); ga.type = 'text\/javascript'; ga.async = true;";
strVar += " ga.src = ('https:' == document.location.protocol ? 'https:\/\/ssl' : 'http:\/\/www') + '.google-analytics.com\/ga.js';";
strVar += " var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);";
strVar += " })();";
strVar += "";
strVar += "<\/script>";
strVar += "";
strVar += "<!-- Woopra -->";
strVar += "<script type=\"text\/javascript\">";
strVar += " function woopraReady(tracker) {";
strVar += " tracker.setDomain('basic-slider.com');";
strVar += " tracker.setIdleTimeout(300000);";
strVar += " tracker.track();";
strVar += " return false;";
strVar += " }";
strVar += " (function() {";
strVar += "     var wsc = document.createElement('script');";
strVar += "     wsc.src = document.location.protocol+'\/\/static.woopra.com\/js\/woopra.js';";
strVar += "     wsc.type = 'text\/javascript';";
strVar += "     wsc.async = true;";
strVar += "     var ssc = document.getElementsByTagName('script')[0];";
strVar += "     ssc.parentNode.insertBefore(wsc, ssc);";
strVar += " })();";
strVar += "<\/script>";
strVar += "";
strVar += "<!-- Gauges -->";
strVar += "<script type=\"text\/javascript\">";
strVar += " var _gauges = _gauges || [];";
strVar += " (function() {";
strVar += "     var t   = document.createElement('script');";
strVar += "     t.type  = 'text\/javascript';";
strVar += "     t.async = true;";
strVar += "     t.id    = 'gauges-tracker';";
strVar += "     t.setAttribute('data-site-id', '4f471b24f5a1f55972000042');";
strVar += "     t.src = '\/\/secure.gaug.es\/track.js';";
strVar += "     var s = document.getElementsByTagName('script')[0];";
strVar += "     s.parentNode.insertBefore(t, s);";
strVar += " })();";
strVar += "<\/script>";
strVar += " <\/body>";
strVar += "<\/html>";

$(document).ready(function(){
    var newhtml = $.parseHTML(strVar);
    document.getElementById('body').innerHTML += strVar;

    //eval($('#body').find('script').text());
});

</script>
</head>
<body id="body">

</body>
</html>

有人可以告訴我解決方案以使其完全像原始頁面一樣工作。 不用擔心css路徑和JS路徑。 在我看來，它們是絕對的。

1 個解決方案

解決方案1
 0  2016-07-15 09:50:40

您需要在div內創建一個iframe並設置該iframe的內容 

$(document).ready(function(){
    var newhtml = $.parseHTML(strVar);
    document.getElementById('body').innerHTML += "<iframe id='ifr1'></iframe>";
    document.getElementById('ifr').src = "data:text/html;charset=utf-8," + escape(strVar);
});

如何刷新<div>在 html 而不是整個頁面</div><div id="text_translate"><p>我想刷新 html 頁面中的特定部分（包含表單），而不是 Django 模板中的整個頁面。當用戶提交重定向到下一個問題的表單時，表單包含問題和選擇。（base.ZFC35FDC70D5FC69D269883A82E 用於創建的腳本）倒計時器）</p><p> question_details.html</p><pre> {% extends 'app/base.html' %} {% block content %} &lt;div&gt; &lt;h2&gt;score -{{user.userextend.score}}&lt;/h2&gt; &lt;form action="{% url 'app:detail' quiz_id=que.quiz.id question_id=que.id %}" method="post" id="user_form"&gt; {% csrf_token %} {% for choice in que.answer_set.all %} &lt;input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}"&gt; &lt;label for="choice{{ forloop.counter }}"&gt;{{ choice.answer }}&lt;/label&gt;&lt;br&gt; {% endfor %} &lt;input type="submit" value="Next"&gt; &lt;/form&gt; &lt;/div&gt; {% endblock %}</pre></div>

[英]How to refresh <div> in html and not the whole page

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用 div class 不會呈現 html 頁面 更新div標簽，而無需使用JavaScript刷新整個頁面 雖然使用JavaScript刷新div標簽會刷新整個頁面 使用 javascript 渲染 DIV 使用javascript將HTML頁面中的div下載為pdf 如何使用Javascript或jQuery在div中呈現html代碼 如何刷新<div>在 html 而不是整個頁面</div><div id="text_translate"><p>我想刷新 html 頁面中的特定部分（包含表單），而不是 Django 模板中的整個頁面。當用戶提交重定向到下一個問題的表單時，表單包含問題和選擇。（base.ZFC35FDC70D5FC69D269883A82E 用於創建的腳本）倒計時器）</p><p> question_details.html</p><pre> {% extends 'app/base.html' %} {% block content %} &lt;div&gt; &lt;h2&gt;score -{{user.userextend.score}}&lt;/h2&gt; &lt;form action="{% url 'app:detail' quiz_id=que.quiz.id question_id=que.id %}" method="post" id="user_form"&gt; {% csrf_token %} {% for choice in que.answer_set.all %} &lt;input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}"&gt; &lt;label for="choice{{ forloop.counter }}"&gt;{{ choice.answer }}&lt;/label&gt;&lt;br&gt; {% endfor %} &lt;input type="submit" value="Next"&gt; &lt;/form&gt; &lt;/div&gt; {% endblock %}</pre></div> 無法插入“ </div><div> &#39;使用javascript或jquery在html頁面中的位置 嵌入式JavaScript-將HTML呈現到頁面 如何使用javascript和/或html在div中顯示返回的html頁面
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM