点击后如何设置 iframe 的样式答案

【问题标题】：How to style an iframe after click点击后如何设置 iframe 的样式
【发布时间】：2018-02-04 03:33:34
【问题描述】：

我想为我的 iframe 将加载的框设置样式，添加框阴影和高度，但我不希望在用户单击链接之前对它们进行样式设置，因为会有一个空白框放置一个高的高度。

那么如何在用户点击按钮/链接后设置 iframe 的样式？

<a href="https://google.com" onclick="document.getElementById('load-chat');" target="load-chat">Load the page</a>
	
<iframe style="box-shadow:0px 3px 15px #e4e4e4; border-radius: 10px;" frameborder="0" id="load-chat" name="load-chat" scrolling="0" width="200" height="400"/>

【问题讨论】：

标签： javascript jquery html css iframe

【解决方案1】：

<html>
<head>
    <script>
        function styleMyiFrame() 
        {
            document.getElementById("load-chat").style.boxShadow = "0px 3px 15px #e4e4e4";
            document.getElementById("load-chat").height = "500px";
            document.getElementById("load-chat").width = "500px";
        }
</script>
</head>
<body>
    <a href="https://google.com" onclick="styleMyiFrame();" target="load-chat" id="my">Load the page</a>

    <iframe frameborder="0" id="load-chat" name="load-chat" scrolling="0"/>
</body>

【讨论】：

【解决方案2】：

你可以这样做：

HTML

<a id="lnkLoad" href="https://google.com" target="load-chat">Load the page</a>    

<iframe frameborder="0" id="load-chat" name="load-chat" scrolling="0" width="200" height="200" />

$('#lnkLoad').click(function() {
  $('#load-chat').attr("style", "box-shadow:0px 3px 15px #e4e4e4; border-radius: height:400px;");
});

Online Demo (jsFiddle)

【讨论】：

【解决方案3】：

您的意思是让 iFrame 在页面上不可见，然后当用户单击链接时 iFrame 可见？如果是这样，下面是如何做到这一点的方法。注意，IE9 不支持这个。

.iframe {width:0px; height:0px;display:none;}
.styled-iframe {box-shadow:0px 3px 15px #e4e4e4; border-radius: 10px; width:200px; height:200px;display:block}
.hide {display:none;}

<script>
function styleIframe() {
var open = document.getElementById("load-chat"); 
open.classList.add("styled-iframe");
var hide = document.getElementById("button");
hide.classList.add("hide");
}
</script> 

<a href="https://google.com" onclick="document.getElementById(&apos;load-chat&apos;);styleIframe();" target="load-chat" id="button" >Load the page</a>
	
<iframe frameborder="0" id="load-chat" class="iframe" name="load-chat" scrolling="0" />

【讨论】：

这与我想要的很接近。有什么方法可以触发这个事件，就像我在按钮上添加 display:none 一样？无需为此创建单独的函数..
我编辑了我的答案以隐藏按钮 onclick，但不，我使用单独的函数是实现这一目标的最简单的方法。

【解决方案4】：

我已经设法按照我想要的方式做（所有内联）：

.mywidget {
  width: 250px
}

<div class="mywidget">
  <a href="https://google.com" onclick="document.getElementById('load-chat');
document.getElementById('load-chat').height = '400px';
document.getElementById('load-chat').style.boxShadow = '0px 3px 15px #e4e4e4';
document.getElementById('load-chat').style.borderRadius = '15px';" target="load-chat">Load my iframe
  </a>

  <iframe frameborder="0" id="load-chat" name="load-chat" scrolling="0" width="200px" />

</div>

【讨论】：