Side effects of Script and Iframe in post

I am writing a post on HTML. Afcorse the post will have Codes in it. So for showing results in the post, I am taking help of JSFiddle, by embedding results of the code.

JSFiddle gives two methods for embedding results:

Script

<script async src="//jsfiddle/o7usdL0a/embed/result/"></script>

IFrame

<iframe width="100%" height="300" src="//jsfiddle/o7usdL0a/embedded/result/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

My question is which method should be recommended for embedding results? (Script/IFrame)? Why?

Does any of the above method affect my site performance?

Is there any other alternative method/plugin which will be more fast and better than the above two methods?

I am writing a post on HTML. Afcorse the post will have Codes in it. So for showing results in the post, I am taking help of JSFiddle, by embedding results of the code.

JSFiddle gives two methods for embedding results:

Script

<script async src="//jsfiddle/o7usdL0a/embed/result/"></script>

IFrame

<iframe width="100%" height="300" src="//jsfiddle/o7usdL0a/embedded/result/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

My question is which method should be recommended for embedding results? (Script/IFrame)? Why?

Does any of the above method affect my site performance?

Is there any other alternative method/plugin which will be more fast and better than the above two methods?

• custom-post-types
• posts
• javascript
• performance
• iframe

Share Improve this question edited Dec 2, 2018 at 6:33 nitasot asked Dec 1, 2018 at 18:08 nitasotnitasot 1122 bronze badges 3

• Welcome to WPSE. You may need to edit your question to be more specific. What is the context of adding these? That may make a big difference on what will work best. – butlerblog Commented Dec 1, 2018 at 18:12
• 1 @butlerblog I edited my question as per the requirements... – nitasot Commented Dec 2, 2018 at 6:34
• Any updates @butlerblog sir? – nitasot Commented Dec 3, 2018 at 16:07

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The recommended method for embedding iframes is using the <iframe> tag. It makes for better syntax and also allows you to control the iframe much better.

For example, you are able to remove an iframe's border, control scrolling options, etc.

<iframe src="//jsfiddle/o7usdL0a/embed/result/" style="width: 100%; height: 300px"
scrolling="no" marginwidth="0" marginheight="0" frameborder="0">
</iframe>

The <script async> and the <iframe> methods are both the same when it comes to site performance as they are both asynchronous. If you use the tag it will load asynchronously by default, so no need to worry about blocking code.