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.
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.
The web page is not displayed when the following was inserted in the html. Neither was this working for any other link. Please tell me what is the problem in this?
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can also use the CSS height and width properties to specify the size of the iframe:</p>
<iframe src="https://www.w3schools.com" style="height:500px;width:900px"></iframe>
</body>
</html>
Per the console:
Refused to display 'https://www.w3schools.com/' in a frame because it
set 'X-Frame-Options' to 'sameorigin'.
This means that W3 Schools will not allow you to display its pages in an external iframe.
No need to have the style attribute.
<iframe height="500px" width="800px" src="https://www.google.com" ></iframe>
That should fix it.
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);
I need to include a web page in my jsp file. i.e: https://www.google.com
I tried both <s:include> and <include>, but it didn't work.
Please give me an example for that. Project is use Struts2 Framework.
You need to use an <iframe>.
The <iframe> element represents a nested browsing context.
For example:
<body>
<span>The following is an i-framed content:</span>
<iframe src="https://www.google.com" width="600" height="600">
</iframe>
</body>
I have a html5 banner that I've been supplied with that has some animations and so on. How would I embed this inside an already existing html document? I don't want to grab the code from the html5 document, instead it would be nice if I could link to the html5 banner..
I don't know if this is possible though.
<html>
<body>
<!-- Embed html5 banner here -->
<div src="/assets/html5banner.html" /> <!-- Something like that, I don't know -->
</body>
</html>
Any push in the right direction would really be appreciated! Thanks
Use iframe to embed other html document into your page
<iframe src="#"></iframe>
iFrames are your friends.
<iframe src="/htmlanim.html"></iframe>
You can also be fancy-shmancy and use Ajax to append the content dynamically to an empty <div>-Container.
You should just use an iframe.