应用错误收集

如何引导在友好的IFRAME中加载的AngularJS应用程序

时间：2017-02-04 18:29:09

标签： javascript angularjs iframe

我想在“友好”的IFRAME中加载AngularJS应用程序（由于SEO原因）。

请参阅此处的示例代码： 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);

AngularJS应用程序无法启动，可能是因为document.ready不能以正常方式触发。我可以自举/强制AngularJS代码启动吗？

1 个答案:

答案 0 :(得分：1)

问题解决了：

从JSFiddle迁移到更简单的Web结构。
从单独的spring.datasource.initialize=true HTML文件*。

htmlContent

从template.html **。

*上面第2点的代码（改编自“HTTP GET request in JavaScript?”）：

template.html

**上述第3点的代码：

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);
});