Getting an Html Response Via Pure JavaScript Ajax Calling But Not Getting Executed

Question

What I am trying to achieve is that I want my chat-bot application to be a part of the other application when getting called via asynchronous JavaScript calling. Though the chat-bot itself is an independent application.

I am able to get the Html page as a response of JavaScript Ajax calling but the script content is not visible/ getting executed/ shown on browser. I tried so many solutions which are there online including the eval() function but those didn't work. Looking out for help from the Stack Overflow community.

<div id="x"></div>

<script>
    function y() {
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

                console.log(xmlHttp.responseText);

                /*  Append the fetched content to the 'x' div */
                document.getElementById('x').innerHTML = this.responseText;
            }
        }
        xmlHttp.open('GET', 'http://localhost:port_no/application_Page', true);
        xmlHttp.setRequestHeader('Content-type', 'text/html');
        xmlHttp.send();
    }
    y();
</script>

What is expected that I want my chat-bot to come like a floating window on top of the parent application with all the HTML, CSS properties so that it works same as how it works as an individual application. Like this I want

ajax calls cannot execute embedded javascript for security reasons — , Jun 07 '19 at 12:16

jason.zissman · Answer 1 · 2019-06-07T12:27:22.467

1

You could consider using an iFrame, pointing its src attribute to your endpoint that returns the chatbot page content. This will cause all the HTML/CSS/JavaScript to render properly as if it were being opened directly in its own browser tab or window. As a consequence, all of your scripts would execute properly.

An iFrame can be styled to appear to float above the rest of your webpage as desired.

<iframe width="560" height="315" src="http://localhost:port_no/application_Page"></iframe>

An iFrame is not subject to popup blockers. If you want a true popup to appear as a separate browser window altogether, such as in your example link, you can execute the following code. Notice it controls where and how the popup occurs. Note, however, that many browsers block true popups, and a user may not see this window if they are actively blocking popups.

window.open('http://localhost:port_no/application_Page','popUpWindow','height=500,width=400,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes')

edited Jun 07 '19 at 12:27

answered Jun 07 '19 at 12:21

jason.zissman

2,750
2
19
24

Should document.getElementById('x').innerHTML = this.responseText not be document.getElementById('x').innerHTML = xmlHttpRequest.responseText? This, here will refer to function which does not have the variable in scope. – shmit Jun 07 '19 at 12:27
Thanks you @jason.zissman. I have already tried this solution but it didn't work. – Rahul Vishwakarma Jun 07 '19 at 12:29
In very light testing, I do not think you can assign script tags to HTML elements and expect them to execute. The following command does nothing to StackOverflow: `document.getElementById('left-sidebar').innerHTML = "";` Using an iFrame or popup window is likely better as this is the intended use case for them. – jason.zissman Jun 07 '19 at 12:29
Thanks @RahulVishwakarma, did you try my second recommendation concerning popup windows? If your endpoint is returning properly formatted HTML/CSS/JavaScript, it should work. Perhaps you can edit your question to give an example of what HTML/CSS/JS your endpoint `http://localhost:port_no/application_Page` returns. – jason.zissman Jun 07 '19 at 12:30
Using `var script = document.createElement('script'); script.innerText = 'alert("hello SO");'; document.body.appendChild(script);` works though to create scripts from strings as long as the security allows it. Not sure how to apply it to this question though. And iframe is probably still preferred for full control over the popup. – Shilly Jun 07 '19 at 12:41
@jason.zissman, The endpoint is returning the HTML page as a response and yes i have tried your second recommendation as well. Perhaps you have misinterpreted my question. – Rahul Vishwakarma Jun 08 '19 at 17:50
I have found out the reason for the same but don't know how to implement the solution. If anyone can understand the solution given and help me out [here](https://developer.chrome.com/apps/app_external). – Rahul Vishwakarma Jun 10 '19 at 10:16

Getting an Html Response Via Pure JavaScript Ajax Calling But Not Getting Executed

1 Answers1