forked from blakelee-pendo/blakelee-pendo.github.io
-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.html
137 lines (119 loc) · 5.96 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<html>
<head>
<title>IFRAME TOWN</title>
</head>
<style>
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.title {
width: 100%;
text-align: center;
font-size: 20px;
font-weight: bold;
margin-top: 10px;
margin-bottom: 20px;
}
.iframe-container {
display: flex;
width: 100%;
height: 100%;
justify-content: space-around;
}
iframe {
width: 45%;
height: 80%;
}
</style>
<body>
<div class="title">HOWDY PARDNER, WELCOME TO IFRAME TOWN!</div>
<div class="iframe-container">
<iframe src="/iframe-town-inner-1.html"></iframe>
<iframe src="/iframe-town-inner-1.html"></iframe>
<iframe class="hidden" src="/iframe-town-inner-3.html" style="display:none"></iframe>
<iframe class="hidden" src="/iframe-town-inner-3.html" style="display:none"></iframe>
<iframe id="programmatic-iframe"></iframe>
</div>
<script id="pendo-snippet">
var someAppIframe = document.querySelector('#programmatic-iframe').contentWindow.location.href = 'https://someapp.com';
function addSnippetToFrame(iframe) {
var readyState = iframe.contentWindow.document.readyState;
var iframeHref = iframe.contentWindow.location.href;
try {
if(readyState === 'loading' || iframeHref === 'about:blank') {
iframe.addEventListener('load', () => {
initializeSnippetOnTargetWindow(iframe.contentWindow);
addIframeWatcherToTargetWindow(iframe.contentWindow);
});
} else {
initializeSnippetOnTargetWindow(iframe.contentWindow);
addIframeWatcherToTargetWindow(iframe.contentWindow);
}
} catch(e) {
//
}
iframe.setAttribute('pendo-installed', true);
}
function addIframeWatcherToTargetWindow(targetWindow) {
var int = targetWindow.setInterval(function () {
try {
var iframes = targetWindow.document.querySelectorAll('iframe');
iframes.forEach(iframe => {
var hasPendo = iframe.getAttribute('pendo-installed');
if(!hasPendo) {
addSnippetToFrame(iframe);
}
});
} catch(e) {
// suppress errors
}
}, 500);
}
const shouldAddAgent = !window.location.search.includes('no-agent');
if(shouldAddAgent) {
initializeSnippetOnTargetWindow(window);
addIframeWatcherToTargetWindow(window);
}
function initializeSnippetOnTargetWindow(window) {
const document = window.document;
// The idea here is that this is the literal copy-pasted snippet
// Thats why I override window/document above, so we can shift the target window/document of the
// snippet to the contentWindow/contentDocument of the iframe
(function (apiKey) {
(function (p, e, n, d, o) {
var v, w, x, y, z; o = p[d] = p[d] || {}; o._q = [];
v = ['initialize', 'identify', 'updateOptions', 'pageLoad']; for (w = 0, x = v.length; w < x; ++w)(function (m) {
o[m] = o[m] || function () { o._q[m === v[0] ? 'unshift' : 'push']([m].concat([].slice.call(arguments, 0))); };
})(v[w]);
y = e.createElement(n); y.async = !0; y.src = 'https://pendo-dev-static.storage.googleapis.com/agent/static/' + apiKey + '/pendo.js';
z = e.getElementsByTagName(n)[0]; z.parentNode.insertBefore(y, z);
})(window, document, 'script', 'pendo');
var url = window.location.search;
var queryString = {};
// from https://stevenbenner.com/2010/03/javascript-regex-trick-parse-a-query-string-into-an-object/
url.replace(
new RegExp("([^?=&]+)(=([^&]*))?", "g"),
function ($0, $1, $2, $3) {
queryString[$1] = $3;
}
);
window.pendo.initialize({
visitor: {
id: queryString.visitor || 'testuser@pendo'
},
disableGuideCenterContentSearch: true,
apiKey: '0b8f789d-91df-4cc9-5016-3f7b2e0e8f51',
account: {
id: 12345,
city: 'Raleigh',
zipCode: '27601'
}
});
})('0b8f789d-91df-4cc9-5016-3f7b2e0e8f51');
}
</script>
</body>
</html>