Manipulating CSS on Iframe

问题:

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?

回答1:

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

回答2:

1. just take the content with php (php bot)
2. 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>