My question is simple, I have iframe
with two buttons and some javascript code inside. When i click these buttons, i want to resize this iframe
using its own script. I couldn't find any tutorial for this. However i don't use jQuery for this.
I tried few methods to get iframe
object nothing works. Is there possible way to do this compatible with cross browsers? and is this a bad practice?
Main html page
<html>
<head>
<title>Main Page</title>
<style>
iframe{
border: 1px solid black;
}
</style>
</head>
<body>
<iframe src="pages/widget.html" height="150" width="150" id="iframe1">
</body>
</html>
iFrame
<html>
<head>
<title>Main Page</title>
</head>
<body>
<button onclick="setSize1()">Maximize</button>
<button onclick="setSize2()">Minimize</button>
<script>
function setSize1(){
//get iframe object
iframe.style.height="300px";
}
function setSize2(){
//get iframe object
iframe.style.height="150px";
}
</script>
</body>
</html>
Can't u just use JavaScript:
<script>const beer = {
name: 'Belgian Wit',
metric: 10,
keywords: ['pale', 'cloudy', 'spiced', 'crisp'] };
const markup = `<div class="beer"><h2>${beer.name}</h2><p class="brewery">${beer.metric +1}</p></div>`; document.body.innerHTML = markup;</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.