Iframe external style is invalid

Iframe invalid external style, the same page open style invalid solution in iframe

Started by Sandy at November 18, 2016 - 5:01 AM

View of the path is correct, can use the absolute path to try

Posted by Kim at November 29, 2016 - 5:49 AM

Unless the page of the external file is a relative path, you is it right? Citing other website webpage

Posted by Tracy at December 02, 2016 - 6:26 AM

Separate open is no problem

Posted by Sandy at December 05, 2016 - 7:26 AM

A separate reference ah no problem

Posted by Sandy at December 11, 2016 - 8:10 AM

Single open the page no problem, using iframe to call in question?

Posted by Kim at December 15, 2016 - 8:42 AM

Yes it is a code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><{$Think.config.SYSTEM_TITLE}></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel='stylesheet' type='text/css' href='__THEME__/easyui.css' />
<link rel='stylesheet' type='text/css' href='__CSS__/index.css' />
<link rel='stylesheet' type='text/css' href='__CSS__/icon.css' />
<link rel='stylesheet' type='text/css' href='__CSS__/icon_ext.css' />
<link rel='stylesheet' type='text/css' href='__CSS__/zTreeStyle/zTreeStyle.css' />
<script type='text/javascript' src='__JS__/jquery-1.8.0.min.js'></script>
<script type='text/javascript' src='__JS__/jquery.easyui.min.js'></script>
<script type='text/javascript' src='__JS__/easyui-lang-zh_CN.js'></script>
<script type='text/javascript' src='__JS__/jquery.ztree.all-3.5.min.js'></script>
<script language="JavaScript" type="text/javascript">
var setting = {
data: {
simpleData: {
enable: true
}
},
async: {
enable: true,
url:'__URL__/getMenu',
autoParam:["id", "name"],
otherParam:{"otherParam":"zTreeAsyncTest"}
},
callback: {
onClick: zTreeOnClick
}

};
$(document).ready(function (){
$.fn.zTree.init($("#depTree"), setting);
//Refresh
$('#refresh').click(function (){
$('iframe').each(function (i,item){
var div_display = $(item).parent().parent().css('display');
if(div_display == 'block')
{
item.contentWindow.location.reload(true);
}
});
});
})
/**
* Click on the menu event
*/
function zTreeOnClick(event, treeId, treeNode){
if(treeNode.url_){
addTab(treeNode.name,treeNode.url_);
}
}
/**
* Load TAB function
*/
function addTab(subtitle,url,icon){

$('#mytabs').tabs('add',{
title: 'Tab',
href:'__APP__/Admin/Index/main',
closable: true
});

}
/**
* Create Frame
*/
function createFrame(url)
{
var s = '<iframe id="mainFrame" name="mainFrame" frameborder="0" scrolling="auto" src="'+url+'" style="width:100%;height:100%"></iframe>';
return s;
}
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north'" title="<div style='float:left;padding-left:10px;'>Welcome you, Administrator[admin], Today is<{$today}></div><div id='submenu-div'><ul><li><a href='__APP__/Admin/Public/logout'>Sign out</a></li><li><a id='refresh' href='javascript:void(0)'>Refresh</a></li><li><a id='refresh' href='javascript:void(0)'>Personal settings</a></li></ul></div>"" style="height:100px;padding:0px;overflow:hidden;">
<div id="toolbar" style="text-align:center;"><img src="./Public/Images/system.jpg" width="80%" height="70" /></div>
</div>
<div data-options="region:'west',title:'The menu',split:true" style="width:200px;">
<ul id="depTree" class="ztree"></ul>
</div>
<div data-options="region:'center'" style="overflow:hidden;">
<div id="mytabs" class="easyui-tabs" fit="true" border="false">
<div title="The start page." data-options="iconCls:'icon_main'" style="margin:5px;">
<iframe name="mainFrame" frameborder="0" src="__APP__/Admin/Index/main" scrolling="auto" style="width:100%;height:100%"></iframe>
</div>
</div>
</div>
</body>
</html>

Posted by Sandy at December 17, 2016 - 9:38 AM

The outside is not an absolute path connection is not too good

Posted by Tracy at December 25, 2016 - 10:32 AM

Posted by Tracy at January 01, 2017 - 11:04 AM

Style first with the absolute path to try, if that path leads to

Posted by Kim at January 03, 2017 - 11:11 AM

Routing problem.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel='stylesheet' type='text/css' href='__THEME__/easyui.css' />
<link rel='stylesheet' type='text/css' href='__CSS__/index.css' />
<link rel='stylesheet' type='text/css' href='__CSS__/icon.css' />
<link rel='stylesheet' type='text/css' href='__CSS__/icon_ext.css' />
<link rel='stylesheet' type='text/css' href='__CSS__/zTreeStyle/zTreeStyle.css' />
<script type='text/javascript' src='__JS__/jquery-1.8.0.min.js'></script>
<script type='text/javascript' src='__JS__/jquery.easyui.min.js'></script>
<script type='text/javascript' src='__JS__/easyui-lang-zh_CN.js'></script>
<script type='text/javascript' src='__JS__/jquery.ztree.all-3.5.min.js'></script>

This approach is based on the current path. If the iframe page and the current page is not in the same level, style cannot be applied.

Posted by Ailsa at January 03, 2017 - 12:05 PM

I also encountered the same problem and the landlord
Like you said:
Index.html pages use iframe
Iframe call to a.html

In the index.html reference external style xxx.css and a.html in the page not call success
Only in the a.html again references the xxx.css page is normal

Posted by Steven at January 13, 2017 - 11:55 AM

Iframe external style is invalid

Latest Questions