すべての端末でiframeを反応させるにはどうすればよいですか？

私はHTML、CSS、またはJavaScriptのエキスパートではありませんが、私はこのウェブサイトをすべてのデバイスで反応させる必要があります。それはいくつかの理由のために働いているようしかし、それはいないようだと、私はモバイルウェブブラウザ上でWebサイトを表示するときに代わりに空白の主要なギャップを作成します。ここではすべての端末でiframeを反応させるにはどうすればよいですか？

すると、そのためのコードです：

<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"> 
 
<title>untitled document</title> 
 
<style media="screen"> 
 
body { 
 
    background-color: #f0f0f0; 
 
    font: 1em verdana, arial, helvetica, sans-serif; 
 
    line-height: 0px; 
 
} 
 
h1,h2 { 
 
    font-size: 2em; 
 
    color: #f00; 
 
    text-align: center; 
 
    text-shadow: 0 0 0.06em #000,0 0 0.12em #000; 
 
} 
 
.af-textWrap { 
 
    display: block; 
 
    text-align: center; 
 
    color: #b7b7b7; 
 
} 
 
.af-element { 
 
    text-align: center; 
 
} 
 
#awf_field-90534028, 
 
#awf_field-90534029 { 
 
    display: block; 
 
    width: 98%; 
 
    max-width: 28.125em; 
 
    margin: auto; 
 
    text-align: left; 
 
} 
 
.image { 
 
    display: block; 
 
    width: 98%; 
 
    max-width: 30em; 
 
    height: auto; 
 
    margin: auto; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div id="worked"></div> 
 
<script src="https://fast.wistia.com/embed/medias/cj7247tp29.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_cj7247tp29 videoFoam=true" style="height:100%;width:100%">&nbsp;</div></div></div> 
 
<h1>Offer Ends In:</h1> 
 
<h2 id="time"></h2> 
 
<!-- AWeber Web Form Generator 3.0.1 --> 
 
<form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post"> 
 
<input name="meta_web_form_id" type="hidden" value="604218668"> 
 
<input name="meta_split_id" type="hidden" value=""> 
 
<input name="listname" type="hidden" value="awlist4661276"> 
 
<input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" name="redirect" type="hidden" value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&amp;preview=true"> 
 
<input name="meta_adtracking" type="hidden" value="My_Web_Form"> 
 
<input name="meta_message" type="hidden" value="1"> 
 
<input name="meta_required" type="hidden" value="name,email"> 
 
<input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email..."> 
 
    <div id="af-form-604218668" class="af-form"> 
 
    <div id="af-body-604218668" class="af-body af-standards"> 
 
    <div class="af-element"> 
 
<label class="previewLabel" for="awf_field-90534028"></label> 
 
    <div class="af-textWrap"> 
 
    <input id="awf_field-90534028" class="text" tabindex="500" name="name" type="text" placeholder="First Name..."> 
 
    </div> 
 
</div> 
 

 
<div class="af-element"> 
 
<label class="previewLabel" for="awf_field-90534029"></label> 
 
    <div class="af-textWrap"> 
 
    <input id="awf_field-90534029" class="text" tabindex="500" name="email" type="text" placeholder="Best Email..."> 
 
    </div> 
 
</div> 
 

 
<div class="af-element buttonContainer"> 
 
<input id="af-submit-image-604218668" class="image" tabindex="502" alt="Submit Form" name="submit" src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" type="image"/> 
 
</div> 
 

 
<div class="af-element privacyPolicy"> 
 
<p><strong>I respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></strong></p> 
 
    <div class="af-clear">&nbsp;</div> 
 
</div> 
 

 
</div> 
 
    </div> 
 
    <div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt=""> 
 
    </div> 
 
</form> 
 
<!-- /AWeber Web Form Generator 3.0.1 --> 
 
<script> 
 
(function() { 
 
    'use strict'; 
 
    var handler = function() { 
 
    if (--sec < 0) { 
 
     sec = 59; 
 
    if (--min < 0) { 
 
     min = 0; 
 
     sec = 0; 
 
     } 
 
    } 
 
    var min1 = '0' + min + 'm'; 
 
    var min2 = min + 'm'; 
 
    var sec1 = '0' + sec + 's'; 
 
    var sec2 = sec + 's'; 
 
    var col = ':'; 
 
    document.getElementById('time').textContent = (min < 10 ? min1 : min2) + col + (sec < 10 ? sec1 : sec2); 
 
    }; 
 
    var sec = 0; 
 
    var min = 15; 
 
    handler(); 
 
    setInterval(handler, 1000); 
 
}()); 
 
</script> 
 
</body> 
 
</html>

出典

2017-05-11 Wizard7611

あなたのiframeをので、私は個人的にインラインフレームのelemを監視するために、あなたのコードにsetInterval()を追加することをお勧めするJavaScriptによって注入されたように見えますent。 iframe要素が利用できるようになったら、iframeにbodyを入れてmarginを0に設定します。

$(function() { 
 
    $('#test').append('<iframe src="http://www.w3schools.com"></iframe>'); 
 
    var timer = setInterval(function() { 
 
    $('iframe').load(function() { 
 
     $('iframe').contents().find("head").append($("<style type='text/css'>body{margin:0;}</style>")); 
 
     clearInterval(timer); // Clear the interval 
 
    }); 
 
    }, 10); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"> 
 
</div>

出典

2017-05-12 00:14:49 noob

なぜ 'setTimeout'を使わないのでしょうか？また、w3schoolsへのリンクはあまり良い考えではありません。 –

ラップトップのブラウザウィンドウのサイズを変更してもまだギャップがあります。 – Wizard7611

@RichardYan、 'setTimeout'は、iframeがロードされる前に停止することがあります。 – noob

すべての端末でiframeを反応させるにはどうすればよいですか？

答えて

関連する問題