<div id="floating-button-container" class="full-width">
<ul class="custom-nav-list">
<li class="custom-nav-item" id="tab0">
<a href="#" class="custom-nav-link" onclick="changePage(0);this.blur()">
<i class="fa-solid">
<svg xmlns="http://www.w3.org/2000/svg" width="19.8" height="19.8" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320 96L192 96 144.6 24.9C137.5 14.2 145.1 0 157.9 0L354.1 0c12.8 0 20.4 14.2 13.3 24.9L320 96zM192 128l128 0c3.8 2.5 8.1 5.3 13 8.4C389.7 172.7 512 250.9 512 416c0 53-43 96-96 96L96 512c-53 0-96-43-96-96C0 250.9 122.3 172.7 179 136.4c0 0 0 0 0 0s0 0 0 0c4.8-3.1 9.2-5.9 13-8.4zm84 88c0-11-9-20-20-20s-20 9-20 20l0 14c-7.6 1.7-15.2 4.4-22.2 8.5c-13.9 8.3-25.9 22.8-25.8 43.9c.1 20.3 12 33.1 24.7 40.7c11 6.6 24.7 10.8 35.6 14l1.7 .5c12.6 3.8 21.8 6.8 28 10.7c5.1 3.2 5.8 5.4 5.9 8.2c.1 5-1.8 8-5.9 10.5c-5 3.1-12.9 5-21.4 4.7c-11.1-.4-21.5-3.9-35.1-8.5c-2.3-.8-4.7-1.6-7.2-2.4c-10.5-3.5-21.8 2.2-25.3 12.6s2.2 21.8 12.6 25.3c1.9 .6 4 1.3 6.1 2.1c0 0 0 0 0 0s0 0 0 0c8.3 2.9 17.9 6.2 28.2 8.4l0 14.6c0 11 9 20 20 20s20-9 20-20l0-13.8c8-1.7 16-4.5 23.2-9c14.3-8.9 25.1-24.1 24.8-45c-.3-20.3-11.7-33.4-24.6-41.6c-11.5-7.2-25.9-11.6-37.1-15c0 0 0 0 0 0l-.7-.2c-12.8-3.9-21.9-6.7-28.3-10.5c-5.2-3.1-5.3-4.9-5.3-6.7c0-3.7 1.4-6.5 6.2-9.3c5.4-3.2 13.6-5.1 21.5-5c9.6 .1 20.2 2.2 31.2 5.2c10.7 2.8 21.6-3.5 24.5-14.2s-3.5-21.6-14.2-24.5c-6.5-1.7-13.7-3.4-21.1-4.7l0-13.9z"/></svg>
</i>
<span>טריידים אופציות</span>
</a>
</li>
<li class="custom-nav-item" id="tab1">
<a href="#" class="custom-nav-link" onclick="changePage(1);this.blur()">
<i class="ai-profits">
<img src="https://weinvest.co.il/wp-content/uploads/icon-simulator.png" height="40px" width="40px" />
</i>
<span>סימולטור אופציות</span>
</a>
</li>
<li class="custom-nav-item" id="tab2">
<a href="#" class="custom-nav-link" onclick="changePage(2);this.blur()">
<i class="fa-solid ">
<svg xmlns="http://www.w3.org/2000/svg" height="19.8" width="19.8" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M352 320c88.4 0 160-71.6 160-160c0-15.3-2.2-30.1-6.2-44.2c-3.1-10.8-16.4-13.2-24.3-5.3l-76.8 76.8c-3 3-7.1 4.7-11.3 4.7L336 192c-8.8 0-16-7.2-16-16l0-57.4c0-4.2 1.7-8.3 4.7-11.3l76.8-76.8c7.9-7.9 5.4-21.2-5.3-24.3C382.1 2.2 367.3 0 352 0C263.6 0 192 71.6 192 160c0 19.1 3.4 37.5 9.5 54.5L19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L297.5 310.5c17 6.2 35.4 9.5 54.5 9.5zM80 408a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>
</i>
<span>כלים למסחר באופציות</span>
</a>
</li>
<li class="custom-nav-item" id="tab3">
<a href="#" class="custom-nav-link" onclick="changePage(3);this.blur()">
<i class="ai-profits">
<img src="https://weinvest.co.il/wp-content/uploads/swing-israel.png" height="25.8" width="25.8"/>
</i>
<span>מסחר יומי</span>
</a>
</li>
<li class="custom-nav-item" id="tab4">
<a href="#" class="custom-nav-link" onclick="changePage(4);this.blur()">
<i class="ai-wall-street">
<img src="https://weinvest.co.il/wp-content/uploads/swing-usa.png" width="24.8px" height="24.8px"/>
</i>
<span>סווינג ארה"ב</span>
</a>
</li>
<li class="custom-nav-item" id="tab5">
<a href="#" class="custom-nav-link" onclick="changePage(5);this.blur()">
<i class="ai-profits">
<img src="https://weinvest.co.il/wp-content/uploads/swing-crypto.png" height="29.8px" width="29.8px"/>
</i>
<span>קריפטו</span>
</a>
</li>
<li class="custom-nav-item" id="tab6">
<a href="#" class="custom-nav-link" onclick="changePage(6);this.blur()">
<i class="fa-solid ">
<svg xmlns="http://www.w3.org/2000/svg" height="19.8" width="19.8" viewBox="0 0 640 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M96 64c0-17.7 14.3-32 32-32l320 0 64 0c70.7 0 128 57.3 128 128s-57.3 128-128 128l-32 0c0 53-43 96-96 96l-192 0c-53 0-96-43-96-96L96 64zM480 224l32 0c35.3 0 64-28.7 64-64s-28.7-64-64-64l-32 0 0 128zM32 416l512 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 480c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/></svg>
</i>
<span>סקירת בוקר</span>
</a>
</li>
<li class="custom-nav-item" id="tab7">
<a href="#" class="custom-nav-link" onclick="changePage(7);this.blur()">
<i class="ai-professional">
<svg xmlns="http://www.w3.org/2000/svg" width="19.8" height="19.8" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M4.1 38.2C1.4 34.2 0 29.4 0 24.6C0 11 11 0 24.6 0L133.9 0c11.2 0 21.7 5.9 27.4 15.5l68.5 114.1c-48.2 6.1-91.3 28.6-123.4 61.9L4.1 38.2zm503.7 0L405.6 191.5c-32.1-33.3-75.2-55.8-123.4-61.9L350.7 15.5C356.5 5.9 366.9 0 378.1 0L487.4 0C501 0 512 11 512 24.6c0 4.8-1.4 9.6-4.1 13.6zM80 336a176 176 0 1 1 352 0A176 176 0 1 1 80 336zm184.4-94.9c-3.4-7-13.3-7-16.8 0l-22.4 45.4c-1.4 2.8-4 4.7-7 5.1L168 298.9c-7.7 1.1-10.7 10.5-5.2 16l36.3 35.4c2.2 2.2 3.2 5.2 2.7 8.3l-8.6 49.9c-1.3 7.6 6.7 13.5 13.6 9.9l44.8-23.6c2.7-1.4 6-1.4 8.7 0l44.8 23.6c6.9 3.6 14.9-2.2 13.6-9.9l-8.6-49.9c-.5-3 .5-6.1 2.7-8.3l36.3-35.4c5.6-5.4 2.5-14.8-5.2-16l-50.1-7.3c-3-.4-5.7-2.4-7-5.1l-22.4-45.4z"/></svg>
</i>
<span>דירוג מניות ואג"חים והמלצות מערכת</span>
</a>
</li>
<li class="custom-nav-item" id="tab8">
<a href="#" class="custom-nav-link" onclick="changePage(8);this.blur()">
<i class="ai-ai-portfolio">
<img src="https://weinvest.co.il/wp-content/uploads/tik-ishi-pro-page.png" height="24.8px" width="24.8px"/>
</i>
<span>תיק AI אישי</span>
</a>
</li>
<li class="custom-nav-item" id="tab9">
<a href="#" class="custom-nav-link" onclick="changePage(9);this.blur()">
<i class="fa-solid ">
<svg xmlns="http://www.w3.org/2000/svg" height="19.8" width="19.8" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M96 128a128 128 0 1 0 256 0A128 128 0 1 0 96 128zm94.5 200.2l18.6 31L175.8 483.1l-36-146.9c-2-8.1-9.8-13.4-17.9-11.3C51.9 342.4 0 405.8 0 481.3c0 17 13.8 30.7 30.7 30.7l131.7 0c0 0 0 0 .1 0l5.5 0 112 0 5.5 0c0 0 0 0 .1 0l131.7 0c17 0 30.7-13.8 30.7-30.7c0-75.5-51.9-138.9-121.9-156.4c-8.1-2-15.9 3.3-17.9 11.3l-36 146.9L238.9 359.2l18.6-31c6.4-10.7-1.3-24.2-13.7-24.2L224 304l-19.7 0c-12.4 0-20.1 13.6-13.7 24.2z"/></svg>
</i>
<span>צ`אט SOS</span>
</a>
</li>
<li class="custom-nav-item" id="tab10">
<a href="#" class="custom-nav-link" onclick="changePage(10);this.blur()">
<i class="fa-solid ">
<svg xmlns="http://www.w3.org/2000/svg" height="19.8" width="19.8" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zm-312 8l0 64c0 13.3 10.7 24 24 24s24-10.7 24-24l0-64c0-13.3-10.7-24-24-24s-24 10.7-24 24zm80-96l0 160c0 13.3 10.7 24 24 24s24-10.7 24-24l0-160c0-13.3-10.7-24-24-24s-24 10.7-24 24zm80 64l0 96c0 13.3 10.7 24 24 24s24-10.7 24-24l0-96c0-13.3-10.7-24-24-24s-24 10.7-24 24z"/></svg>
</i>
<span>SECOND OPINION</span>
</a>
</li>
<li class="custom-nav-item" id="tab11">
<a href="#" class="custom-nav-link" onclick="changePage(11);this.blur()">
<i class="fa-solid ">
<svg xmlns="http://www.w3.org/2000/svg" height="19.8" width="19.8" viewBox="0 0 640 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2s0 0 0 0s0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.2-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9c0 0 0 0 0 0s0 0 0 0l-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z"/></svg>
</i>
<span>צ'אט פרו</span>
</a>
</li>
<li class="custom-nav-item" id="tab12">
<a href="#" class="custom-nav-link" onclick="changePage(12);this.blur()">
<i class="fa-solid ">
<svg xmlns="http://www.w3.org/2000/svg" height="19.8" width="19.8" viewBox="0 0 640 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9l0 28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5l0-24.6c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z"/></svg>
</i>
<span>קורסים</span>
</a>
</li>
<li class="custom-nav-item" id="tab13">
<a href="#" class="custom-nav-link" onclick="changePage(13);this.blur()">
<i class="ai-professional">
<img src="https://weinvest.co.il/wp-content/uploads/be-karov-katava-pro-page.png" height="25.8" width="25.8" />
<span>בקרוב כתבה על</span>
</a>
</li>
<li class="custom-nav-item" id="tab14">
<a href="#" class="custom-nav-link" onclick="changePage(14);this.blur()">
<i class="ai-ai-simulator" style="margin-top:28px";>
<svg xmlns="http://www.w3.org/2000/svg" width="19.8" height="19.8" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M128 32c0-17.7-14.3-32-32-32S64 14.3 64 32l0 32L32 64C14.3 64 0 78.3 0 96s14.3 32 32 32l32 0 0 256c0 35.3 28.7 64 64 64l224 0 0-64-224 0 0-352zM384 480c0 17.7 14.3 32 32 32s32-14.3 32-32l0-32 32 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-32 0 0-256c0-35.3-28.7-64-64-64L160 64l0 64 224 0 0 352z"/></svg>
</i>
<span>כלים נוספים</span>
</a>
</li>
</ul>
</div>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap">
<style>
/* Global Reset and Basic Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
/* Main Container Styling */
.custom-nav-list {
list-style: none;
margin: 0 auto;
padding: 0.75rem;
background-color: #3d7fb85e;
display: flex;
flex-direction: column;
border-radius: 10px;
box-shadow: 0 10px 50px rgba(5, 4, 62, 0.25);
}
/* Margin Between List Items */
.custom-nav-item + .custom-nav-item {
margin-top: 0.75rem;
}
/* Link (Button) Styling */
.custom-nav-link {
color: #FFF;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 8px;
position: relative;
transition: background-color 0.15s ease;
}
.custom-nav-link:hover, .custom-nav-link:focus, .custom-nav-link.active {
background-color: #7da7ccd6;
outline: none;
}
/* Icon Styling */
.custom-nav-link i {
font-size: 1.375rem;
}
/* Tooltip Styling */
.custom-nav-link span {
font-size : 16px;
position: absolute;
background-color: #7da7cc;
color: #FFF;
white-space: nowrap;
padding: 0.5rem 1rem;
border-radius: 6px;
/* Position tooltip to the left */
right: calc(100% + 1.5rem);
transform-origin: center right;
transform: scale(0);
opacity: 0;
transition: transform 0.15s ease, opacity 0.15s ease;
}
.custom-nav-link:hover span, .custom-nav-link:focus span {
transform: scale(1);
opacity: 1;
}
/* Tooltip Arrow Styling */
.custom-nav-link span::before {
content: "";
display: block;
width: 12px;
height: 12px;
background-color: #7da7cc;
position: absolute;
/* Position the arrow on the right side of the tooltip */
right: -6px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
#floating-button-container{
top: 20% !important;
width: 140px !important;
z-index: 10;
}
/* Dropdown Container (details) Styling */
#floating-button-container details {
position: fixed;
right: 1rem;
bottom: 1rem;
margin-top: 2rem;
color: #05043e;
display: flex;
flex-direction: column;
}
/* Dropdown Content Styling */
#floating-button-container details div {
background-color: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
padding: 1.25rem;
border-radius: 8px;
position: absolute;
max-height: calc(60vh - 100px);
width: 400px;
max-width: calc(100vw - 2rem);
bottom: calc(100% + 1rem);
right: 0;
overflow: auto;
transform-origin: 100% 100%;
}
/* Scrollbar Styling for Dropdown Content */
#floating-button-container details div::-webkit-scrollbar {
width: 15px;
background-color: #fff;
}
#floating-button-container details div::-webkit-scrollbar-thumb {
width: 5px;
border-radius: 99em;
background-color: #ccc;
border: 5px solid #fff;
}
/* Margin Between Elements in Dropdown Content */
#floating-button-container details div > * + * {
margin-top: 0.75em;
}
/* Code Block Styling in Dropdown */
#floating-button-container details div p > code {
font-size: 1rem;
font-family: monospace;
color: #185adb;
font-weight: 600;
}
/* Preformatted Text Styling in Dropdown */
#floating-button-container details div pre {
white-space: pre-line;
background-color: #f9f9f9;
border: 1px solid #95a3b9;
border-radius: 6px;
font-family: monospace;
padding: 0.75em;
font-size: 0.875rem;
}
/* Animation for Dropdown */
#floating-button-container details[open] div {
animation: scale 0.25s ease;
}
/* Summary (Toggle) Styling for Dropdown */
#floating-button-container summary {
display: inline-flex;
margin: 0 auto;
justify-content: center;
align-items: center;
font-weight: 600;
padding: 0.625em 1.25em;
border-radius: 99em;
color: #fff;
background-color: #185adb;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: background-color 0.15s ease;
position: relative;
}
/* Hide Default Summary Marker */
#floating-button-container summary::-webkit-details-marker {
display: none;
}
/* Summary Hover and Focus Effect */
#floating-button-container summary:hover, #floating-button-container summary:focus {
background-color: #184bdb;
}
/* Summary Icon Styling */
#floating-button-container summary i {
font-size: 1.375em;
margin-left: 0.25em;
}
/* Keyframes for Scale Animation */
@keyframes scale {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
.bos-simulator {
display: none;
position: static !important;
}
</style>
<script>
let currentTabId = 0;
async function changePage(id) {
let scrollPos = window.scrollY;
document.getElementById(`tab${currentTabId}`).classList.remove('active');
currentTabId = id;
document.getElementById(`tab${id}`).classList.add('active');
// Send the postMessage and wait for the response
let messagePromise = new Promise((resolve) => {
window.addEventListener('message', function handleMessage(event) {
if (event.data.tabChanged) {
window.removeEventListener('message', handleMessage); // Cleanup listener
resolve(); // Resolve when the iframe responds
}
});
});
document.getElementById('proIframe').contentWindow.postMessage({changeTab: id});
// Wait for the iframe to signal that the tab has been changed
await messagePromise;
// Scroll to the previous position smoothly
window.scrollTo({
top: scrollPos,
behavior: 'smooth'
});
}
</script>
</iframe> <script type="application/javascript"> function resizeIFrameToFitContent( iFrame ) { console.log(iFrame.contentWindow.document.documentElement.scrollHeight); iFrame.style.height = iFrame.contentWindow.document.documentElement.scrollHeight + 'px'; setInterval(function() {if(iFrame.style.height != iFrame.contentWindow.document.documentElement.scrollHeight) { iFrame.style.height = iFrame.contentWindow.document.documentElement.scrollHeight + 'px'; }},2000);} </script>
<style>
* {
margin: 0;
padding: 0;
}
#proIframe {
transition: height 1s ease;
}
#sidebar {
display: none;
}
#floating-button-container {
display: flex;
flex-direction: column;
gap: 10px;
float: right;
position: fixed;
width: 100px;
margin-right: -120px;
top: 80px;
}
.category {
border-radius: 15px 0 15px 0;
background-color: #e5b485;
color: #000000;
height: 40px;
}
.active {
border-radius : 8px;
}
.content>.e3lan {
margin: 0;
}
</style>
<body>
<!-- <div id="floating-button-container" class="full-width">
<button id="tab0" onclick="changePage(0)" class="category active">כלים למסחר באופציות</button>
<button id="tab1" onclick="changePage(1)" class="category">עדכונים בזמן אמת - אופציות</button>
<button id="tab2" onclick="changePage(2)" class="category">נתונים היסטוריים אופציות</button>
<button id="tab3" onclick="changePage(3)" class="category">רווחים</button>
<button id="tab4" onclick="changePage(4)" class="category">כלים למניות, קרנות ואגח</button>
<button id="tab5" onclick="changePage(5)" class="category">וול סטריט</button>
<button id="tab6" onclick="changePage(6)" class="category">השכלה</button>
<button id="tab7" onclick="changePage(7)" class="category">מקצועי</button>
<button id="tab8" onclick="changePage(8)" class="category">חברתי</button>
<button id="tab9" onclick="changePage(9)" class="category">תיק מניות AI אישי</button>
<button id="tab10" onclick="changePage(10)" class="category">סימולטור אופציות AI אישי</button>
</div> -->
<iframe id="proIframe" class="full-width" src="https://weinvest.co.il/wp-content/plugins/pro-page/pro.php"
loading="eager" frameborder="0" scrolling="no" height="100vh" width="100%" onload=""></iframe>
<script>
let currentTabId = 0;
function changePage(id) {
document.getElementById(`tab${currentTabId}`).classList.remove('active')
currentTabId = id
document.getElementById(`tab${id}`).classList.add('active')
document.getElementById('proIframe').contentWindow.postMessage({ changeTab: id })
}
</script>
<script type="application/javascript">
function resizeIFrameToFitContent(iFrame) {
// Reset the height to avoid cumulative growth
iFrame.style.height = '1px';
// Calculate the new height using offsetHeight
let newHeight = iFrame.contentWindow.document.documentElement.offsetHeight;
console.log("Content height:", newHeight);
// Apply the calculated height
iFrame.style.height = newHeight + 'px';
// Check periodically for content changes (every 2 seconds)
setInterval(function () {
let currentContentHeight = iFrame.contentWindow.document.documentElement.offsetHeight;
// Reset before recalculating if the content height changes
if (iFrame.style.height != currentContentHeight + 'px') {
iFrame.style.height = '1px'; // Reset height again
iFrame.style.height = currentContentHeight + 'px';
console.log("Updated height:", currentContentHeight);
}
}, 2000);
}
</script>
<script>
function observeIframeContent(iframe) {
iframe.onload = function () {
const iframeDocument = iframe.contentWindow.document;
let debounceTimer;
let lastHeight = 0;
// Function to adjust the iframe height dynamically
function setIframeHeight() {
try {
// Reset height to auto, so the content can shrink
iframe.style.height = 'auto';
// Get the correct content height using clientHeight for a more accurate measurement
const contentHeight = iframeDocument.documentElement.clientHeight || iframeDocument.body.clientHeight;
// Only apply the new height if it has changed
if (contentHeight !== lastHeight) {
lastHeight = contentHeight;
iframe.style.height = contentHeight + 'px';
console.log("This is the content height: ", contentHeight);
}
} catch (e) {
console.warn("Unable to access iframe content: " + e.message);
}
}
// Debounce function to limit rapid height adjustments
function debounceSetHeight() {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(setIframeHeight, 500); // Adjust height after 500ms delay
}
// Initial height adjustment on iframe load
setIframeHeight();
// Set up a MutationObserver to detect changes in content and adjust height accordingly
const observer = new MutationObserver(() => {
debounceSetHeight(); // Debounce the height adjustment
});
// Observe changes in the iframe's body and subtree
observer.observe(iframeDocument.body, {
childList: true,
subtree: true,
attributes: true
});
// Optional: Observe the iframe's document for changes that may not be captured by the body observer
observer.observe(iframeDocument.documentElement, {
attributes: true,
childList: true,
subtree: true
});
};
}
// Call this after initializing or switching iframe sources
const proframe = document.getElementById('proIframe');
observeIframeContent(proframe);
</script>
<script>
function resizeByHeight(iframe) {
setInterval(() => {
let comHeight = 0;
let innerIframe = iframe.contentWindow.document.querySelector('iframe');
[...innerIframe.contentWindow.document.querySelector('body').children].forEach(child => {
comHeight += child.offsetHeight || 0;
})
console.log('calculated height: ', comHeight)
iframe.style.height = comHeight + 'px';
}, 1000);
}
function resizeIFrameToFitContentNew(iFrame) {
iFrame.style.height = '1px'
let boundingContainer = parent.window.document.getElementById("main-content")
if (boundingContainer) iFrame.width = boundingContainer.clientWidth;
iFrame.style.height = iFrame.contentWindow.document.documentElement.offsetHeight + 'px';
setInterval(function () {
// console.log(`style height: ` + iFrame.style.height)
// console.log(`contentWin height: ` + iFrame.contentWindow.document.documentElement.offsetHeight);
if (iFrame.style.height != iFrame.contentWindow.document.documentElement.offsetHeight) {
iFrame.style.height = iFrame.contentWindow.document.documentElement.offsetHeight + 'px';
}
}, 100);
}
</script>
