Responsive Inline Frame
Posted: Tue Sep 17, 2024 3:44 pm
I have a simple responsive iFrame that work fine offline. But when I add an Inline Frame to my wbs project, I don't get responsiveness in auto height adjustment.
I have read the thread "viewtopic.php?t=98316&hilit=inline+fram ... d40f52c718" and procedure is bit complex there.
How can I add my code piece in the .wbs project page to make it work.
My HTML code is:
==============================
<!DOCTYPE html>
<html>
<head>
<link rel ="stylesheet" href ="quiz.css">
</head>
<body>
<div class="container">
<iframe id="dynamic-iframe" src="My External Link that I will insert"></iframe>
</div>
<script>
window.addEventListener('message', (event) => {
// Check if the message is from the authorized origin
if(event.origin === 'My External Link that I will insert') {
if (event.data === 'Unauthorized access') {
alert('You are not authorized to access the quiz');
}
}
});
</script>
<!-- <script src="script.js"></script> -->
</body>
</html>
======================
My CSS
======================
.container {
width: 800px;
margin: 0 auto;
display: block;
}
.link-container a {
display: block;
margin-bottom: 10px;
padding: 10px;
background-color: #2529f7;
text-decoration: none;
color: #333;
}
#dynamic-iframe {
width: 100%;
height: 550px;
border: 1px solid #2529f7;
}
I have read the thread "viewtopic.php?t=98316&hilit=inline+fram ... d40f52c718" and procedure is bit complex there.
How can I add my code piece in the .wbs project page to make it work.
My HTML code is:
==============================
<!DOCTYPE html>
<html>
<head>
<link rel ="stylesheet" href ="quiz.css">
</head>
<body>
<div class="container">
<iframe id="dynamic-iframe" src="My External Link that I will insert"></iframe>
</div>
<script>
window.addEventListener('message', (event) => {
// Check if the message is from the authorized origin
if(event.origin === 'My External Link that I will insert') {
if (event.data === 'Unauthorized access') {
alert('You are not authorized to access the quiz');
}
}
});
</script>
<!-- <script src="script.js"></script> -->
</body>
</html>
======================
My CSS
======================
.container {
width: 800px;
margin: 0 auto;
display: block;
}
.link-container a {
display: block;
margin-bottom: 10px;
padding: 10px;
background-color: #2529f7;
text-decoration: none;
color: #333;
}
#dynamic-iframe {
width: 100%;
height: 550px;
border: 1px solid #2529f7;
}
