0
所以目前我有一個需要解決的錯誤，我想我找到了什麼是錯的，但我仍然不知道如何解決它。iframe的錯誤，不能得到正確的字體與jQuery有時
我有一個是通過jQuery的加載內容像這樣的的iFrame：
var content = {{ json_encode($template) }};
$('#preview-iframe').contents().find('html').html(content);
而且在行動中，它看起來像：http://jsfiddle.net/9aV8v/
所以我有一些表單元素，看起來像：
<select name="ccpick" data-obj=".custom-color-1" class="fontpick">
<option value="Verdana">Verdana</option>
<option value="NeutraText-Book">NeutraText-Book</option>
<option value="Arial">Arial</option>
</select>
它確實有效：http://jsfiddle.net/K9pL7/
當我需要設置默認字體，顏色或大小（也是頁面上的一些元素）時，會發生此問題。
出於某種原因，在這裏工作：http://jsfiddle.net/ScYgy/1/
的fontpick選項後，我用了一個名爲選擇二插件也讓他們很：
$(".fontpick").selectize({});
$(".fontsizepick").selectize({});
但是我的網頁上的所有這些元素和更多的東西添加它不起作用。看起來，在Firefox則返回錯誤的字體：
正如你所看到的（9）假，是的console.log（）這是從Chrome中，當我更新了2次就開始突然工作。
console.log($(this).text() === $("#preview-iframe").contents().find($(this).parent().data('obj')).css('font-family'));
如果我在Firefox CONSOLE.LOG，什麼字體，它實際上發現：它返回「」襯「」
另外一個問題是，當我嘗試更新Chrome瀏覽器有時它的工作原理，但有時會崩潰....
上面的問題也出現在選擇字體大小時，可以問題是，有時這些東西在加載iframe之前執行也許呢？我不知道。
這裏是所有的jquery：
$('.color-box').colpick({
colorScheme:'dark',
layout:'rgbhex',
color:'ff8800',
submit: 0,
onChange:function(hsb,hex,rgb,el,bySetColor) {
$(el).css('background-color', '#'+hex);
if(!bySetColor) $(el).val(hex);
$("#preview-iframe").contents().find($(el).data('obj')).css($(el).data('objattr'), '#' + hex);
}
}).css('background-color', '#000000');
var template_id = {{ $theme->template_id }};
//Contents
var content = {{ json_encode($template) }};
$('#preview-iframe').contents().find('html').html(content);
//Give default color
$('.color-box').each(function(i, el){
var color = $("#preview-iframe").contents().find($(el).data('obj')).css($(el).data('objattr'));
$(el).css('background-color', color);
console.log(color);
});
$('.fontsizepick').val(function() {
return $("#preview-iframe").contents().find($(this).data('obj')).css('font-size').slice(0,-2);
});
$('.fontpick').change(function() {
$("#preview-iframe").contents().find($(this).data('obj')).css('font-family', $(this).val());
});
$('.fontsizepick').change(function() {
$("#preview-iframe").contents().find($(this).data('obj')).css('font-size', $(this).val() + 'px');
});
$(".fontpick option").filter(function() {
console.log($("#preview-iframe").contents().find($(this).parent().data('obj')).css('font-family'));
return $(this).text() === $("#preview-iframe").contents().find($(this).parent().data('obj')).css('font-family');
}).prop('selected', true);
//Selectize
//$(".fontpick").selectize({});
// $(".fontsizepick").selectize({});
這裏是一種形式：
<div class="row">
<div class="small-6 columns select-left">
<h5 class="text-muted">
Huvudrubrik
</h5>
<select name="menu_title[]" data-obj=".main-header" class="menu-title-choice fontpick">
<option value="Verdana">Verdana</option>
<option value="NeutraText-Book">NeutraText-Book</option>
<option value="Arial">Arial</option>
</select>
</div>
<div class="small-4 columns select-right">
<div style="height: 25px; margin-top: 3.200000047683716px; margin-bottom: 8px;"></div>
<select name="" data-obj=".main-header" class="fontsizepick">
@for ($i = 15; $i < 70; $i++)
<option value="{{ $i }}">{{ $i}}
@endfor
</select>
</div>
<div class="small-2 columns">
<div class="color-box" data-obj=".main-header" data-objattr="color"></div>
</div>
</div>
在模板，其通過的iFrame加載。
<tr>
<td colspan="4" class="header center">
<span class="custom-color-1 main-header">MENY</span>
</td>
</tr>
最後的CSS主標題：
.main-header {
color: #000000;
font-family: Arial;
font-size: 1.5rem;
}
我怎樣才能得到正確的字體大小和家人，我做「有時」使用Chrome所有的時間，而且在Firefox中，它也在jsfiddle中工作。
我想添加角度作爲標籤 –