如何呈现HTML文本放在没有iframe的第三方网页的div中?

时间:2016-05-05 10:53:09

标签: javascript html ajax

我想基于我的Subsciber在网页上的任何位置生成html以及SVG代码(或者你可以说任何div)。

我想给一些javascript代码放在那个页面的div的一边,所以在我的代码所在的那个div。

我不想使用iframe,因为高度和宽度未定义为自动化。

这里我尝试过,我还在努力。

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>TODO write content</div>        
        <div>

            <script>

                (function(){
                    var xhr=new XMLHttpRequest();

                    xhr.open("get","request Url of my side",true);
                    xhr.send();

                    xhr.onreadystatechange = function(){ 
                        if(xhr.readyState==4 && xhr.status==200){
                            document.write(xhr.responseText);
                        }
                    };
                }());

            </script>

        </div>   
    </body>
</html>

但是这里发生的事情是在响应整个页面加载并document.write()删除现有内容并放置responseText之前。

任何帮助将不胜感激。

2 个答案:

答案 0 :(得分:1)

JQuery解决方案。你可以在纯java中编写类似的东西,但它有点难。在<div id="results"></div>内,您会收到回复。

$.ajax({
  url: "test.html",
  cache: false
})
  .done(function( html ) {
    $( "#results" ).append( html );
  });

参考:http://api.jquery.com/jquery.ajax/

编辑:纯Javascript解决方案:

异步=真:

xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) {
    document.getElementById("results").innerHTML = xhttp.responseText;
  }
};
xhttp.open("GET", "test.html", true);
xhttp.send();

异步=假:

xhttp.open("GET", "test.html", false);
xhttp.send();
document.getElementById("results").innerHTML = xhttp.responseText;

参考:http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

答案 1 :(得分:0)

它只需要我很长时间才能找到document.scripts

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>TODO write content</div> 
        Here Is The Code
        <div>
        <script>
            (function(t){
                var xhr=new XMLHttpRequest();xhr.open("get","request url",true);xhr.send();
                xhr.onreadystatechange=function(){ if(xhr.readyState==4 && xhr.status==200){ 
                        document.scripts[document.scripts.length-1].parentNode.innerHTML=xhr.responseText;}}
                 }(this));
        </script>
        </div>

    </body>
</html>