从 Office 加载项中记录 iframe(url) 的状态答案

【问题标题】：Recording State of iframe(url) from within an Office Add-in从 Office 加载项中记录 iframe(url) 的状态
【发布时间】：2017-11-24 09:36:30
【问题描述】：

所以我正在开发一个办公室插件，其中基本上包含一个 iframe，它将运行我们拥有的应用程序。

问题是，我想不断记录 iframe 的 url，以便我可以将其保存到插件状态，以便我们每次重新打开插件时使用该信息将 iframe 加载到正确的 url。

每次更改时，我都无法找到从 iframe 中输出 url 的方法？这是我所拥有的示例，它不包含应用程序，仅包含几个示例页面：

主页.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title></title>
    <script src="../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="../Scripts/FabricUI/MessageBanner.js" type="text/javascript"></script>
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>

    <link href="Home.css" rel="stylesheet" type="text/css" />
    <script src="Home.js" type="text/javascript"></script>

    <!-- For the Office UI Fabric, go to https://aka.ms/office-ui-fabric to learn more. -->
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.min.css">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.components.min.css">


</head>
<body>


</body>
</html>

Home.js

(function () {
    "use strict";

    // The initialize function must be run each time a new page is loaded
    Office.initialize = function (reason) {
        $(document).ready(function () {

            var iframew = document.createElement('iframe');
            iframew.src = '../SecondPage/SecondPage.html';
            iframew.id = 'iframe1';
            iframew.onload = iframeLoaded(this.contentWindow.location.href);

            document.body.appendChild(iframew);


        });
    };

    // Helper function for displaying notifications

    function iframeLoaded(location) {
        console.log("log", location);
    }
})();

【问题讨论】：

标签： javascript jquery html iframe office-addins

【解决方案1】：

无法理解为什么人们不赞成这个问题，这是一个真正的问题

无论如何，对于任何有兴趣的人，我通过在 iframe 加载后附加一个函数来解决这个问题，该函数以设定的时间间隔输出 iframe 的 url

var iframew = document.createElement('iframe');
        iframew.id = 'iframe1';
        var baseUrl = '#YOUR BASE URL#';

        let openUrl = getProperty('openurl');
        if (!openUrl) {
            console.log('No saved url');
            iframew.src = baseUrl;

        }
        else {
            console.log('saved url');
            console.log(openUrl);
            iframew.src = openUrl;

        }
        //when iframe loads attach function to save at interval
        iframew.addEventListener('load', function () { setInterval(function () { iframeLoaded(iframew.contentWindow.location.hash, iframew.contentWindow.location.href); }, 4000); });
        document.body.appendChild(iframew);

这里是 iframeLoaded 函数，它还对 url 进行一些操作并调用另一个函数，将 url 保存到加载项的文档设置中：

function iframeLoaded(hash, location) {
            //if not in an analysis dont save
            if (hash.indexOf('#/dataset/') !== -1 ) {
                console.log("Same url")
                return
            }
           //remove # from hash
            hash = hash.substr(1);
            //concatenate base and hash
            let newUrl = baseUrl + hash;
            console.log(hash)
            console.log(newUrl);
            //save
            if (Office.context.document.settings) {
                saveProperty('openurl', newUrl);
            }
        }

【讨论】：