I have some problems using a custom CSS with iframe in Blogger.
I tried to link the CSS in the HTML page to edit the iframe style but nothing worked, I also tried to write the CSS directly in the HTML page but nothing worked.
I want to use a custom CSS for the iframe that I have on my Blogger website.
Is there any solution for this problem?
It is you answer:
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);
Related
I have a website with AMP pages that allow editors to add images to the page. The images are displayed using an amp-img element and render in any normal browser.
When either user a reader view or being crawled by a site such as Embedly the amp-img elements are not displayed.
I assume this is caused by the amp-img element not being a valid HTML element so is ignored. Is there anyway to get around this issue?
You can add a noscript element for renderers not using javascript:
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800">
<noscript>
<img src="welcome.jpg" alt="Welcome" height="400" width="800" />
</noscript>
</amp-img>
I had left out the head tag of <script async src="https://cdn.ampproject.org/v0.js"></script> as listed in the documentation. Including that fixed it.
I need to change the iframe url css styles
<iframe id="anil" width="400" height="480" src="https://getbootstrap.com/docs/3.3/examples/starter-template/"></iframe>
Tried it using jquery but couldn't solve it
$("iframe").contents().find("body").css("background-color","yellow");
You can not access by javascript the content of an iframe for security reasons.
I have some HTML code I'm trying to embed into a site.
The code is an iframe that is supposed to have a bunch of links in it, but when I click the links, they just load the page inside the iframe block.
Here is the code:
base.html
<head height="200" width="300">
Text
</head>
<div>
<body>
<iframe height="200" width="300" src="test.html"></iframe>
</body>
</div>
test.html
<head>
Link
</head>
Is there a way for me to tell the link NOT to load inside the frame?
I already know of a workaround which is to add "target="_blank"" to the link so it opens in a new tab.
Try adding the target attribute as shown below
Link
the tag _parent will target the iframe's immediate parent window.
the tag _top will target the top window.
Try adding target="_top" this should target the parent URL instead of the iframe URL
<head>
<a target="_top" href="file:///Users/Jean/base.html">Link</a>
</head>
I'm working on a webpage where I need to be able to click on buttons that change iframes with in a parent page. I thought this would be a simple task but no matter what I do, the button keeps opening a new window rather than opening the page inside the iframe. The page looks perfect and the iframe loads up but when I click the button in the parent window to change the page it opens in a new tab. Here is the complete code I'm using (minus the changed webpage names) if someone could point out what I'm doing wrong please.
<head>
<style>
body
{
background-image:url(bg4.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top;
background-size:100%;
}
p.pos_fixed
{
position:fixed;
top:98px;
right:298px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stupid webpage that dont work</title>
</head>
<body>
<p class="pos_fixed">
<iframe id="MSL" src="http://www.yahoo.com" width="975" height="800">
</iframe>
<center>
<a href="http://www.google.com" target="MSL">
<img src="MSL.jpg" alt="MSL" width="42" height="42"></a>
</center>
</p>
</body>
</html>
In order for your link to target the iframe, you must add the "name" attribute to such frame, nothing to do with "id"
<iframe id="MSL" name="MSL" src="http://www.yahoo.com" width="975" height="800">
</iframe>
Also, your DOM structure is very bad, you should not nest iFrames inside paragraphs. In short, the target attribute in anchor elements need to match the name attribute in the iFrame unless it is a reserved one such as "_blank", "_self", "_parent", or "_top".
I've checked out plenty of other questions but still no luck.
I'm working on my local machine in chrome.
I've got welcome.html (main page) and test.html (iframe page)
then I have my style.css.
The Goal: Have my test.html as an iframe inside my welcome.html page. But have the iframe (test.html) be styled using jQuery.
So I have this in my welcome.html
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $head = $("iframe").contents().find("head");
$head.append($("<link>", { rel: "stylesheet", href: "style.css", type: "text/css" }));
});
</script>
and then this inside the body tag
<iframe name='iframe' id="iframe" src="test.html"></iframe>
iframe is working but no styles are being attached when I inspect the iframe.
I'm assuming you can't directly edit the iframe source? The simplest solution would be to just add the <link> tag there.
However, your real problem may be that it can't find the css file. The src attribute in the <link> tag needs to be relative to the location of the iframe. If the iframe is on some other domain, you'll need an absolute path (in your case maybe "http://localhost/whatever/style.css").