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

标签 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. 从 JSFiddle 转向更简单的 Web 结构。
  2. 从单独的 template.html HTML 文件加载 htmlContent*。
  3. template.html** 中引导 AngularJS。

*上面第 2 点的代码(改编自 “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);
});

**上面第 3 点的代码:

<script type="text/javascript">
    angular.bootstrap(document, ['myAngularModule']);
</script>

关于javascript - 如何引导在友好的 IFRAME 中加载的 AngularJS 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42043983/

相关文章:

javascript - 将图像/视频上传到单独的服务器 - Javascript Meteor

javascript - 可以将外部 iframe 包含到 google chrome 扩展中吗

AngularJS 如何在指令中的元素被替换之前访问它们

javascript - 如何从 jszip 和 angularjs 中的 zipobject 获取 csv 文件对象

java - iframe parent.function() 调用在 Phonegap 中使用时未定义

javascript - 如何检查 iFrame 中是否有值

javascript - 绝对定位的 div 不滚动;当其他内容滚动时保持固定在屏幕上

javascript - 如何等待函数在 Angular 2 中完成执行?

javascript - 使用具有类似功能的 indexOf 查找数组的索引包括

angularjs - 模板内的嵌套指令放置在顶部