This question already has answers here:
Can I apply CSS to the elements within an iframe?
(3 answers)
Closed 8 years ago.
I have used below code
This is my Iframe:
<iframe scrolling='no' frameborder='1' id='fblike' src='http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.XYZ.com%2F&send=false&layout=standard&width=450&show_faces=true&font&colorscheme=light&action=like&height=50'></iframe>
$('#fblike').contents().find('.pluginButton').css({'background','#FF8000'});
I have also applied Css directly
.pluginButton {
background: none repeat scroll 0 0 #FF8000 !important;
}
Still it is not working.I want to change pluginButton's background.I want to apply image to its background.How to apply?
If I understand you correctly, then what you want to do is inject CSS into the iframe which loads a Facebook page.
The short answer is that it is not possible. Here is an answer posted on SO with a more detailed explanation: Can I apply CSS to the elements within an iframe?
No, not from outside the iframe. An is its own world. If the domains etc. match, then Javascript can communicate in and out, and could (if it wanted to) inject CSS into a child frame.
If the contains content from a different domain, there's pretty much nothing you can do. The parent page controls the size of the frame and whether it's visible, and can put its own content over the frame by positioning etc, but it can't directly effect the way the actual frame content is rendered.
Here is another explanation from: How to apply CSS to iframe?
Edit: This does not work cross domain.
There are two different things here: the style of the iframe block and the style of the page embedded in the iframe. You can set the style of the iframe block the usual way:
<iframe name='iframe1' id="iframe1" src="empty.htm" frameborder="0" border="0" cellspacing="0" style="border-style: none;width: 100%; height: 120px;"></iframe>
The style of the page embedded in the iframe must be either set by including it in the child page:
<link type="text/css" rel="Stylesheet" href="Style/simple.css" />
Or it can be loaded from the parent page with Javascript:
var cssLink = document.createElement("link")
cssLink.href = "style.css";
cssLink .rel = "stylesheet";
cssLink .type = "text/css";
frames['frame1'].document.body.appendChild(cssLink);
The code of setting the css seems alright semantically as the html is not available to ensure if you correctly used the selectors. You are probably accessing DOM element before they become available. The element of frame may not become ready on document.ready event but on window.load Put the code in window.load to ensure the elements in iframe are available to script.
$(window).load(function){
$('#fblike').contents().find('.pluginButton').css({'background','#FF8000'});
})
Related
I've created an email editor to allow my users created their custom email messages.
The page that contains the editor has also a preview of the custom email, in PHP <div id="email_preview"><?= $email_preview ?></div>.
The problem is that if the user types in some CSS, than the elements of the containing page can be modified.
Is there a way to make the preview not influence the containing page?
The most common way for doing this is by using an iFrame, or setup a styling convention/script. By using an iFrame you can keep their content/styling separate from its container.
https://www.w3schools.com/html/html_iframe.asp
Your code <?= $email_preview ?> is outputting markup to the page when it loads. So all of the CSS they've entered is present in the page and your browser will render it accordingly.
The only way you could do this is if you stop the user inputting anything unless it applies to certain named ID's/classes.
For example if they enter
p {
font-size: 14px;
}
Before saving this - and outputting it with <?= $email_preview ?> you could change it to:
#email_preview p {
font-size: 14px;
}
This means their CSS is only applied within #email_preview as opposed to all p elements on the rest of the page.
The other option would be to load the content in a modal window which excludes anything other than the markup stored in $email_preview. This is basically a blank web page with no other markup so it can only affect the intended content. This is like isolating the content within a page but is useful for preview purposes like this (amongst other things).
Rewriting all of the styles of the inbound HTML is the other alternative. (prefixing the styles or similar).
So what I want to do is create a subdomain on my website and have it load an external website into it without actually going to that website. For instance:
google.mydomain.com loads google.com but the URL bar reads google.mydomain.com.
How do I go about doing this?
I tried this but could not figure it out.
Trying:
iframe
I want page to take up the whole screen for each person's computer. Can I set it to 100% instead of x amount of pixels?
I want to remove scroll bars but it says not supported.
You can use either an Iframe, or file_get_contents();
Iframe:
<iframe src="http://google.com" style="width: 100%; height: 100%;">
file_get_contents():
<?php
echo file_get_contents('http://google.com');
?>
With file_get_contents(), you need to beware of the website you're fetching from using relative URL's, which will break the CSS, Images, Javascript, etc.
You are not going to be able to use php's include function, as this is not a resource residing on your server.
One option you could explore is loading everything in as the contents of an iframe: see http://www.w3schools.com/tags/tag_iframe.asp for some details about the iframe html element
iframe is now not supported in html5
it works on html5 also
Easy to add or remove
Example:
<body onload="window.location.href='https://www.google.com/'"> </body>
I have created a page in which I am showing A websites Page (situated some where on web );
I used iframe but puzzled with the height issues I solved width issues for 950px only with css3 but my need is full height as target website but that is not working with cross domain pages (I've done with same domain successfully).
Now I want to do it either with PHP using get_file_content() or some other putting it into div , iframe or in frames whatever works (and also pages must be accessible as it is from main sites)
The container will change its content with hyper link click.
Please help me to resolve the issues.
I've tried many more methods including jquery, js, php, css and blah blah blah with no success.
before commenting or answering please visit THIS LINK
I need some thing like this
Please check this and alter here
To See My page Click here
Note:
I have no access of target site so I can't put attributes on target
page and get back to iframe page.
I have 100+ pages to show so no
specific method can be used i need any generalized technology.
One more thing i don't want scrolling in my page.
Efforts done :
Ajax/Jquery
PHP Resize
In the "iframe'd" html, have:
<body onload="parent.resize_iframe(document.body.scrollHeight)">
and in the page that iframes:
<script type="text/javascript">
function resize_iframe(new_height) {
document.getElementById('iframed').style.height = parseInt(new_height, 10) + 60 + 'px';
}
</script>
I used 60px to fix potential padding etc.
Note that they have to be under the same domain for this to work, otherwise you might have to run:
<script type="text/javascript">
document.domain = "domain.com";
</script>
On either or both. This is required so that the browser may interact between them.
Do something like this:
<frameset rows="*">
<frame frameborder=0 src="http://www.discountautoparts.com/" scrolling="auto" noresize>
</frameset>
If you do that it should look like this picture
I'm using JQuery to resize an iframe to make it have the same height as it's content, it works perfectly though it only works if the content is in the same domain.
I need to display external content so I'm making the iframe point to a file in my server which in turn should display the external content:
<iframe src="frame.php" scrolling="no" frameborder="0" noresize="noresize" style="width:100%; border: 1px solid black;">
How do I make frame.php display the content of the external domain?
In case you need more info here is the answer on how to do it (he explains everything excepts how to display content in the php file):
AutoHeight IFrame
Thanks
So you want to fetch the contents of an external site?
This will work, but it'll break the layout when the target page has non-absolute URLs and relative links:
frame.php:
<?php
echo file_get_contents($_GET['url']);
?>
<?php echo file_get_contents( "http://example.com" );?>
Somethhing like that will do
Unfortunately, php isn't the correct language to be doing this. In order to determine the height of the document in the iframe, you would need to make a javascript call from the parent document (where the iframe element is) to the document referenced in the src of the iframe.
In the case where the src of the iframe is on your domain, you have full permission to use the DOM of the document to get the document's height, as per the same origin policy. When you load a document from another domain, you do not have permission to query for the height. What the answerer of your question seems to be suggesting is setting up a proxy on your site so that the same origin policy would be circumvented.
However, there going to be other issues with that (ie relative links on the proxied page, etc.)
I build a css file using PHP which allows me to easily customize the color of many elements. Is it possible for me to "rebuild" the stylesheet and apply it to the page in the DOM using Jquery?
eg.
<?php
if (isset($_POST['mycolor'])){
$myColor = $_POST['mycolor'];
} else {
$myColor = "blue";
}
?>
<style type='text/css'>
.style1{
color:<?php $myColor;?>;
}
</style>
Now on my page I have a link you can click called "change color to red" and when you click "red" it does a $.post to my php script, which rebuilds the css including .style1 - and allows the page to change the stylesheet.
I haven't tested this but would it even work? If I echo'ed out the new stylesheet after the post into the dom... would it even apply to the page?
You can do something like this if your whole stylesheet is php generated:
function newCSS(params){
$("link[href*=myStyles.php]:last").after('<link href="myStyles.php?'+ params +'" type="text/css" rel="Stylesheet" />');
$("link[href*=myStyles.php]:first").remove();
}
This replaces the link in the head with the new one...the new styles will take effect once it's loaded.
You could use the css function to set different css properties on elements:
$('.style1').css('color', 'red');
I recommend you to create your dynamic css as a php-file. More info here: http://www.barelyfitz.com/projects/csscolor/
EDIT:
Here's an improved solution using selector provided by Nick:
$("link[href*=myStyles.php]").attr('href','myStyles.php');
I don't know if you've ever heard about LESS. It's a nice little tool that makes it possible for you to have "variables" in your CSS. Which seems to be what you are really wanting.
Have a look at This blog post which should help you.