.load() how can i bring in css?
I'm working on a mobile site where its main news section is being pulled from its main site.
It was suggested to me to use jQuery since it allows you to mark a....well, this is what I ended up going with.
<script src="http://code.jquery.com/jquery-git.js"></script>
<script>
$(document).ready(function(){
$('#result').load(开发者_StackOverflow中文版'index.php #leftColumn');
});
</script>
"left column" is the div that holds my news on the main site.
The problem now is that although it does work, it doesn't pull in the style so when I view it on say, my iPhone, its all right on top of one another.
I tried to embed my main sites css on the mobile, but the only thing is accepts from that css is the H tags. thats it. no margins, padding etc come through.
any ideas, suggestions are humbly welcomed.
If you can move to using a json response for the page fragment you're loading, you can use $.get instead of load() so you can differentiate from your html and your css:
$.get('index.php', function(data) {
$('#result').html(data.content);
if (document.createStyleSheet) {
// IE needs this
document.createStyleSheet(data.stylesheet);
}
else {
// Other browsers
$('<link rel="stylesheet" type="text/css" href="' + data.stylesheet + '" />').appendTo('head');
}
});
index.php
if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'):
header("Content-type: application/json");
$response = array(
'content' => '<p>Content of #result</p>',
'stylesheet' => '/some/stylesheet.css'
);
exit(json_encode($response));
endif; // otherwise, load normal page
If using a JSON response is not an option for you, the only thing I can think of is embedding the <link> into your page fragment, or just simply loading the custom css by default (that would be my choice).
EDIT: Wasn't thinking mobile when I answered, but hopefully this helps all the same. Time for me to get some sleep or coffee :)
for standards, link element is only allowed in <head> section, thus any link element in <body> section is invalid and would take no effect, just try to filter out all link element and append to head:
$('#result').load(yourUrl, function() {
$('#result').find('link').appendTo('head');
}
it may works
加载中,请稍侯......
精彩评论