I have Iframe embed external website to my website but my text, button and content is very large.
Image of my content:
The content's code:
<div class="row-container">
<div class="poker_content" [ngClass]="{'not-opened': iframeUrl === null}">
<iframe [src]="iframeUrl | safe" *ngIf="showIframe"></iframe>
</div>
</div>
How can I manipulate the content?
Styling the contents of an iframe is just like styling any other web page. But, you must have access to edit the page. If you can't edit the page (for example, it's on another site).
If you can edit the page, then you can add an external style sheet or styles right in the document just like you would style any other web page on your site.
Reff. - https://www.lifewire.com/iframes-and-css-3468669
just take the content with php (php bot)
add class to buttons after content is loaded jquery ile
Example Jquery;
$("#fancybox-frame").load(function(){
$('#fancybox-frame').contents().find("a").css("background-color","#BADA55");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe frameborder="0" scrolling="auto" src="http://www.uzatmabirader.com/Dunya" hspace="0" name="fancybox-frame1302993380315" id="fancybox-frame"></iframe>
Related
I am showing embedded iframe document in my application, what I am trying to do is hiding menu button from top bar in Webview of this embedded iframe. I am using DocumentCloud platform for storing and retrieving the documents, DocumentCloud gives me the link of my document and I add that my html and rendering it using react-native-webview. This is my iframe tag link, you can open it browser. I did tried achieving this using changing fields/options in iframe src url which is probably best solution for it, but I couldn't find any option to turn that thing off in document cloud documentation. I am getting this results.
I want to hide the the menu icon shown in top bar in above image.
iFrame looks like this
<iframe loading="lazy" src="https://www.documentcloud.org/documents/282753-lefler-thesis.js" width="700" height="800" sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-popups-to-escape-sandbox" frameborder="0"></iframe>
This is how I am rendering Webview.
<WebView
scrollEnabled={false}
onMessage={callback}
style={styles.container}
containerStyle={styles.viewContainer}
source={{
html: htmlRender(
iframe
),
}}
/>
htmlRender method is wrapping iframe within in html and doing some styling and reporting the height and width of iframe.
You can injectJavaScript and query these buttons with 2 selectors:
document.querySelector('.hamburger')
returns div with svg
document.querySelector('.fullscreen')
returns span with svg
Hiding is something like:
document.querySelector('.hamburger').style.display = "none";
I am using iframe to embed an Excel file into a HTM page using the Microsoft OneDrive embed function, and it will display the excel file, but it doesn't embed it, it makes the entire page the excel file.
So it takes over the entire page, I lose the sidebar and toolbar of my site that has the navigation.
I tried containing it within a div and apply class styles to both the div and the iframe, which is what I used for my PDFs that I embed that work fine, but it still did not restrict the excel file to an embedded window.
This is what I am using for the excel iframe:
<body>
<iframe width="100%" height="100%" frameborder="0" scrolling="no" src="https://onedrive.live.com/embed?resid=7CDAFECF25AB92FC%21110&authkey=%21AGaGmMnPaiFZ0Ew&em=2">
</iframe>
</body>
And this is what I use for my PDF iframe:
<body>
<div class="container"><iframe class="responsive-iframe" src="PS-U-A150FUI.pdf"></iframe>
</div>
</body>
EDIT: Here are images to better show the issue, first image is a PDF correctly imbedded within the webpage.
Second is the excel doc that has overtaken the webpage.
PDF Embed
Excel Embed
Your code reads:
<iframe width="100%" height="100%" frameborder="0" scrolling="no" src="https://onedrive.live.com/embed?resid=7CDAFECF25AB92FC%21110&authkey=%21AGaGmMnPaiFZ0Ew&em=2">
</iframe>
You have used 100% width and 100% width in your HTML. So the iframe takes up the complete screen.
Take an example: you need the frame to be 500px wide and 700px long, then you could have used the width=“500px”
and the height=“700px” attributes in your iframe or used the following css:
iframe {
width: 500px;
height: 700px;
}
What basically I want to say is, that you should use smaller pixel-values/percentages for the iframe.
Actual Scenario - We have a wp multisite. I need to show the content of a parent site's page on a sub site's page.
Please let me know if you need any clarification about the problem.
I tried some of the methods which are -
1) use switch_to_blog method but the problem with this is - I am using page builder widget on my main site's page and when this method fetch the content on sub site, it did not show the content with correct layout.
2) use iframe - I could not find any way to write the css inside the iframe attributes.
Here i am adding my way how od i use iframe.
<iframe class="my_irame" src="http://externalpage.com"></iframe>
This output me -
<object id="myframe" width="100%" height="600px" myfunction()"="" style="overflow:auto;> </object>
<html>
<body>
<div id="header">some text</div>
<div class="container>some text</div>
</body>
/html>
My concern is to hide the div inside iframe having id header.
If you wish to change the styles for only the contents within an iframe from the parent site I would suggest doing the following.
Create the iframe on the page you want to pull content into like so:
<iframe class="my_irame" src="http://externalpage.com/folder/pagename?iframe=show"></iframe>
In the above iframe we're sending a get request to the page that loads the content inside the iframe.
Then on the site pulling into the iframe you create a new stylesheet below your other styles just before the closing </head> tag with a PHP if statement.
<?php if($_GET['iframe']=='active'){ ?>
<link href="styleSheetToOverWriteAllOtherStyle" rel="stylesheet" type="text/css" />
<?php } ?>
The above stylesheet will only be used where the ?iframe=active is being used in the URL or src. And thus only on your iframe and you can then in this stylesheet hide the header of the parent site without it affecting the parent sites styles. You can actually then override all styles from the parent site for the iframe.
If there are going to be links within the iframe then just let me know as that will make it a bit more complex. Especially if they reload the iframe.
I found answers about how to do this WITH php (example: load HTML\PHP pages into another Page's div).
However, I need to be able to do this in a CKEditor and I don't have the ability to include PHP code (or javascript or any other code).
Here's the existing iframe I wish to replace with divs (if possible):
<iframe src="http://www.example.com/page1/2/3.html" frameborder="0" height="400" scrolling="no" width="100%"></iframe>
I appreciate any ideas... Thanks
Why dont you try AJAX to load the content?
//Its a javascript code:
<script type="text/javascript">
$('#15').click(function()
{
$(".box").load('content8.html');
});
$('#16').click(function()
{
$(".box").load('edit.html');
});
</script>
// For Displaying the content, create a seperate DIV:
<div class="box effect8" >
"The Ajax content loaded inside this div"
</div>
Unfortunately, what you are trying to do is simply not possible. However. what you can do is apply styles to your iframe to make it work more like a div. An iframe is inline, and a div is block. You can make your iframe block so that it behaves like a div.
Without CSS:
<iframe style="display:block" src="http://www.example.com/page1/2/3.html" frameborder="0" height="400" scrolling="no" width="100%"></iframe>
With CSS:
iframe
{
display: block;
}
I have a page that contains an iframe element. I want to have some text on the main page when clicked to change the iframe source. I can do that with an "a href" tag but the main page resets to the top instead of where the user was last on the page vertically. If I use an input type=button element, then it works just fine without resetting to the top of the main page. However, I want the look of just text on the page (with an underline) instead of a button look. How can I do this?
use target
Go to page 2
<iframe src="page1.html" frameborder="0" name="test"></iframe>
you can use a div or span (actually pretty much any element) instead of a button
<div onclick="iframe.src='new.html'" class="lookcool">sometext</a>
Not sure what you have done so far, but it seems like you want to change the page displayed in an iframe. To do that with a link, you can use target or javascript:
Target:
link
<iframe name="iframe" src="http://www.example.com" />
Javascript:
link
<iframe id="iframe" src="http://www.example.com" />