How to render HTML Text To Be Placed Inside third party webpage`s div without iframe?

Question

I want to generate html as well as SVG code based on my Subsciber`s any of the position of on web page (or you can say any of the div).

I want to give some javascript code to be put in side of that page`s div so at that div whole my code place.

I don't want to use iframe because height and width is not defined its automated.

here what i have tried and i am still trying.

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

But what happening here is before response came whole page was loaded and document.write() erase existing content and place my responseText .

Any Help will be appreciated.

3rd party's page not on your server and not under your control? You can't change that unless they give you permission to and then you would need to do a cross domain request - originating from their server to yours — Pete, May 05 '16 at 11:15
I already take care about CORS. and i am just creating web service. and providing data to subscribers just like facebook flike, google plus index and pinit indexer. confusion is at rendering data to subscribers — Nisarg Desai, May 05 '16 at 11:52
Okay I did solve it myself with the help of this http://stackoverflow.com/questions/403967/how-may-i-reference-the-script-tag-that-loaded-the-currently-executing-script answering my question — Nisarg Desai, May 05 '16 at 12:03

RaV · Answer 1 · 2016-05-05T11:11:09.227

1

JQuery solution. You can write similar in pure java, but its a bit harder. Inside <div id="results"></div> you will get your response.

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

Reference: http://api.jquery.com/jquery.ajax/

EDIT: Pure Javascript solution:

Async=true:

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

Async=false:

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

Reference: http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

edited May 05 '16 at 11:11

answered May 05 '16 at 11:00

RaV

1,029
1
9
25

well the problem is that selector can be anything because subscriber page is not under my control. so i want to render my text without specified a selector – Nisarg Desai May 05 '16 at 11:04
So you can paste javascript, but you cannot affect page in any other way? And it will be
without id? – RaV May 05 '16 at 11:06
Yes because i client html page is not under my control. – Nisarg Desai May 05 '16 at 11:08
If you can use jQuery solution - open it in chrome developer tools, find element you want to past in, right click on it -> copy -> copy selector and paste it instead of #results. Should work. – RaV May 05 '16 at 11:09
well code will be genrate from the server and it will be based on request parameter. so there is not any specific code that i want to place. sync request is an option but browser shows its have been deprecated so no longer its will be supported by browser mozilla and chrome both. – Nisarg Desai May 05 '16 at 11:13
For example comment above would be `$( "#comment-61645739 > td.comment-text > div > span.comment-copy" ).append( html );` – RaV May 05 '16 at 11:13
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/111114/discussion-between-nisarg-desai-and-rav). – Nisarg Desai May 05 '16 at 11:14
There is no way to paste it anywhere if you dont have any way to refer to element you want to paste :) There need to be sth. You can modify request, for example to access all comments here you'd use `td.comment-text > div > span.comment-copy` - just modify it a bit and try if u can access it. – RaV May 05 '16 at 11:16
Try this: http://stackoverflow.com/questions/10081689/html-onload-for-non-body-elements – RaV May 05 '16 at 11:28

score 0 · Accepted Answer · answered May 05 '16 at 12:07

its just take me long time to find 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>

How to render HTML Text To Be Placed Inside third party webpage`s div without iframe?

2 Answers2