Question

我想设置我的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"/>

Answer 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>

Answer 2

您的意思是让iFrame在页面上不可见，然后当用户点击链接时iFrame可见吗？如果是这样，那么方法就是如何做到的。注意，IE9不支持此功能。

＆＃13;

.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;}

＆＃13;

<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" />

＆＃13;

Answer 3

你可以这样做：

<强> 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" />

<强> JS

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

Online Demo (jsFiddle)

Answer 4

我设法以我想要的方式（所有内联）：

$('#english').click(function () {
        $.cookie('default_page', dutch_page, { expires: 999 });
        alert('Dutch was set as the default language');
    });

$('#english').click(function () {
        $.cookie('default_page', english_page, { expires: 999 });
        alert('English was set as the default language');
    });

如何在点击后设置iframe样式

4 个答案: