0

I want to load an AngularJS app inside a “friendly” IFRAME (due to SEO reasons).

See example code here: https://jsfiddle.net/tomsoderlund/mssca32k/

var embedDiv = document.getElementById('weld-embed');

// Create friendly IFRAME
var newIframe = document.createElement('iframe');
newIframe.src = 'about:blank';
newIframe.width = '100%';
newIframe.height = '100%';
newIframe.frameBorder = '0';
embedDiv.appendChild(newIframe);

// Create contents inside
var htmlContent = '<!doctype html>'
    // ...
    + '<\/body><\/html>';

newIframe.contentWindow.document.write(htmlContent);

The AngularJS app doesn’t start up, probably because document.ready doesn’t trigger in a normal fashion. Can I bootstrap/force the AngularJS code to start up?

Tom Söderlund
  • 4,743
  • 4
  • 45
  • 67

1 Answers1

1

The problem was solved by:

  1. Moving from JSFiddle to a simpler web structure.
  2. Loading htmlContent from a separate template.html HTML file*.
  3. Bootstrapping AngularJS from within template.html**.

*Code from point 2 above (adapted from “HTTP GET request in JavaScript?”):

var httpGetAsync = function (theUrl, callback) {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function () { 
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            callback(xmlHttp.responseText);
        }
    }
    xmlHttp.open("GET", theUrl, true); // true for asynchronous 
    xmlHttp.send(null);
}

httpGetAsync('/template.html', function (htmlContent) {
    newIframe.contentWindow.document.write(htmlContent);
});

**Code from point 3 above:

<script type="text/javascript">
    angular.bootstrap(document, ['myAngularModule']);
</script>
Community
  • 1
  • 1
Tom Söderlund
  • 4,743
  • 4
  • 45
  • 67