Develop Reference

How to lazyload a iframe with caching in mind

I used this method before.
<iframe data-src="https://youtube.com/...?autoplay=1"></iframe>
On event with javascript I turned the data-src to src and the video started to play.
I had browser caching problems with that, videos autoplaying in background (I load a thumbnail in place for the actual iframe) when going back in the browser. Because of that I switched to a method where I just load the iframe inside a comment
<!--<iframe src="https://youtube.com/...?autoplay=1"></iframe>-->
and then remove the comment on click. I saw Google using this exact method on Google plus. Problem is caching again now, this time server side. I think very likely cloudflairs auto minify is removing HTML comments.
A quick search showed my its probably not possible to mark comments to they wont removed with cloudfliar. On top if this its a wordpress plugin so the issue is still relevant to all kinds of caching plugins that remove HTML comments.
So now my question is. Is there better method lazyloading iframes without HTML comments? I like to still somehow store the iframe in place ... well just as I am writing this I may be able to store the data to build a iframe in some random tag json encoded or something and then build the iframe on click.

Just came across this.
So this the <script> tag could be a good solution, no modification of data needed, but prevents the browser from doing anything with it.
HTML
<script type="text/html" class="arve-lazyload">
<iframe src="https://youtube.com/...?autoplay=1"></iframe>
</script>
jQuery
var lazyloaded_iframe = $('.arve-lazyload');
$( lazyloaded_iframe.html() ).insertAfter( lazyloaded_iframe );

The other method putting it into script was actually again causing W3Tc surround with with [CDATA] messing with my code.
This is my new and hopefully final method. I really like it. The data() gives me the attributes as it comes in. Little big on the HTML but I think finally I am save from caching plugins.
HTML
<div class="arve-lazyload" data-allowfullscreen="" data-class="arve-iframe fitvidsignore" data-frameborder="0" data-name="" data-sandbox="allow-scripts allow-same-origin" data-scrolling="no" data-src="https://www.youtube-nocookie.com/embed/w68VZ8C1Q24?iv_load_policy=3&modestbranding=1&rel=0&autohide=1&playsinline=1&autoplay=1"></div>
jQuery
lazyload = wrap.find('.arve-lazyload');
if ( lazyload.length ) {
$('<iframe></iframe>').attr( lazyload.data() ).insertAfter( lazyload );
}

Visual Composer doesn't load after inline script was added to the page on WordPress

how is it going?
I'm having some trouble with the visual composer for WordPress...
I was testing a widget, so I inserted some HTML and JS on an element inside the VC on the Home, and Saved the Page. Everything look good on the output, but when I try to edit the page again through the Admin panel, I get errors refering to the Script previously added, and the VC does not load.
So, I can't open the element to remove the Script, and I can't seem to find this content anywhere on the database (searched wp_posts), so I can do it manually.
Anyone have ideas on how to possibly solve this?
I reeally didn't want to overwrite my database just to fix one page.
Thanks in advance.

Ok, so my husband got it...
What he did was this:
Inspect the element of the Visual Composer disabled textarea, remove
the class disabled.
The content showed up, not configured, but still.
Then, find the real textarea behind tinyMCE and its content.
Beware that the content is all encoded, so you will not find any "
or < or any HTML tags, so you better search for key words.
Remove the problematic part of the code, in my case, the script tag
and Publish the page.
Problem solved. Without overwriting all database.
Thank you all for trying to help. :)

How to stop page load in html static page

Is there in HTML (javascript) or other static html tech
can:
Stop page loading (if browser does not download yet)
Stop page rendering (from where the code placed)
Stop javascript executed (from where the code placed)
Simply put, is there a code like
<script>window.StopWhateverBelow()</script>
To let browser totally ignore whatever below the code.
UPDATE
I understand the browser may already download the whole thing. What I want is, from the code, page should stopped, for example: if I put the code just after <body> visitor should see blank page, if I put the code in middle of the page, page should be just half like you pressed ESC
ANSWER
As bukko suggested, comments done the trick. But not full, just half
If you put <!-- in html page, the rest will be ignored. And in Javascript
document.write('<!--');
Done the trick.
For about make sense:
Here is how this code make sense: when you page load some offpage script, the script is dynamic. When the script code found something wrong (or match some condition), you have one more option to stop the page from rendering, loading, download...

You could do window.stop(); for most browsers besides Internet Explorer. For IE, I had to use document.execCommand('Stop');

If you already have html comments on your page, #bukko's solution doesn't fully work. Stuff after the html comment will get rendered normally.
Something else to try is:
document.write('<script type="text/undefined">')
The rest of the document gets interpreted as part of the script tag, and because the script isn't text/javascript, it gets ignored.
Worked for me, thought I'd share it.
Edit
I've seen the script trick not work in Chrome.
This does work, but I have not done extensive browser testing:
document.write('<style type="text/undefined">')

window.stop(); //works in all browsers but IE
if ($.browser.msie) {document.execCommand("Stop");}; //works in IE,
document.execCommand works in IE, however it does stop some of FF, NS and some other browsers' functions. Like displaying GIF's animation for example. Using "if browser is IE" makes these two codes work perfectly in all browsers.

Well, there is:
<!--
terminated by
-->
for HTML, but scripts will ignore this.

What you are asking makes no logical sense. Simply for two reasons:
Data is ALREADY sent to the user (HTML / JS) so even tho if you COULD hide content, the data would sitll be there for a user to see (if they view source for instance).
Why would you stop 'execution' of a page? It loads simple html structure and reults in a visual display, you should focus on the server site (php for instance) to hide or not send the content in the first place.
If you want to visually hide elements tho, you could use CSS styles (hide divs or the like) with simply adding style="display:none;" to a div like so:
<div style="display:none;">
This text will be downloaded by the user, but hidden from view due to CSS inline style
</div>
If you want to add commenting (thats just for your reference), then use comment formatting:
<!-- this is a comment and will not show up to a user -->
Reference for comments: http://htmlhelp.com/reference/wilbur/misc/comment.html

put window.Stop() wherever you want to stop the page from getting renderred

You could also hide the body like that:
var style = document.createElement("style");
style.innerHTML="body { display:none !important; }";
document.getElementsByTagName("HEAD")[0].appendChild(style);

HTML is static content so the server reads whatever you have written in the file unless you comment it out. For a dynamic file like what you are asking for you need to use php which can do this type of thing.

Just not much related to the question, but I thought it may be useful for some persons. If you want to jump to other page during page loading use window.location = "somepage.html"; or you can redirect users to the previous page: window.history.go(-1); Useful in JavaScript conditional statements

If you are using ASP or PHP, HTTP protocol automatically stops but HTTPS protocol don't stop automatically.
To stop it use:
In ASP:
dim r= accept.secure.protocol
r.onload=window.callback('c')
//to firefox,opera,safari
new clientObject(r).access()
// to chrome,ie
forEachElement(a==null);
PHP code:
$a.window ;
All this scripts sends the browserstring "elementcast" by post method

The stop methods can break things that have already started to load.
If you want to load everything above a certain point and skip everything below a certain point:
<p>Everything works above this point.</p>
<pre style="display: none !important;">
<p>As long as the PRE tag remains open,
nothing works below this point</p>
<script>document.write('Nope');

Loading portion of site into iframe

I have a script which loads content into a iframe using:
document.GetElementById('iframeid').src = 'site.html';
Now, the problem is that I want only a portion of the page loaded. If I could use jQuery I would specify which part by:
$('#iframeid').load(src = 'site.html .classforportion');
However if seems like jQuery .load doesn't work for iframes.
Is it possible to 'fool' the browser into grabbing the contents of a variable or a function for the first case? Or is it possible to create temporary 'html'-files only for so long that the script would load the right contents into it and pass it to an iframe (hm... seems unlikely...).
A work around solution for this specific case would be removing the first line of the loaded page. Is that possible with javascript or jQuery? Is it possible for this situation involving the iframe?
Thanks, going crazy over this thing! So, any help appreciated!

Ive never heard of a way of doing this with javascript since you cannot access files outside your own domain with javascript. You can do like this with PHP
<?php
function get_content_part($part=null, $website = null)
{
$website = file_get_contents($website);
$data = str_replace("\n", '', $website);
echo preg_match("/\<div class\=\"'.$part.'\"\>(.*)<\/div\>/",$data,$match);
return $match;
}
?>
Maybe integrate this with a javascript Ajax call and you can do it by javascript calls.
Best regards
Jonas

Now, the problem is that I want only a portion of the page loaded
Load page into the invisible container (iframe, div, etc..) or in a javascript string variable and do whatever you want to do with it. For example, load partial content into invisible div and than copy it into iframe or load the hole page into invisible iframe and then copy the part you need into another, visible one.

How to block pop-up coming from iframe?

I'm embedding page that has an exit pop-up. When you close the page, it automatically launches a pop-up window.
How to disable pop-ups coming from the iframe on exit?

If you are wanting to block something like POP up ads or something coming from a website you are showing in an IFRAME - it's fairly easy.
Make a framefilter.php and javascriptfilter.php which your iframe points to.
You can modify it to meet your needs such as the onload blah blah and etc.
But as/is - it's been working fine for me for quite a while. Hope it helps.
Replace your standard IFRAME HTML with this:
<IFRAME SRC="http://www.yourdomainhere.com/framefilter.php?furl=http://www.domainname.com" WIDTH=1000 HEIGHT=500>
If you can see this, your browser doesn't
understand IFRAMES. However, we'll still
link
you to the page.
</IFRAME>
Framefilter.php
<?php
//Get the raw html.
$furl=trim($_GET["furl"]);
$raw = file_get_contents($furl);
$mydomain="http://www.yourdomainhere.com/";
//Kill anoying popups.
$raw=str_replace("alert(","isNull(",$raw);
$raw=str_replace("window.open","isNull",$raw);
$raw=str_replace("prompt(","isNull(",$raw);
$raw=str_replace("Confirm: (","isNull(",$raw);
//Modify the javascript links so they go though a filter.
$raw=str_replace("script type=\"text/javascript\" src=\"","script type=\"text/javascript\" src=\"".$mydomain."javascriptfilter.php?jurl=",$raw);
$raw=str_replace("script src=","script src=".$mydomain."javascriptfilter.php?jurl=",$raw);
//Or kill js files
//$raw=str_replace(".js",".off",$raw);
//Put in a base domain tag so images, flash and css are certain to work.
$replacethis="<head>";
$replacestring="<head><base href='".$furl."/'>";
$raw=str_replace($replacethis,$replacestring,$raw);
//Echo the website html to the iframe.
echo $raw;
?>
javascriptfilter.php
<?php
//Get the raw html.
$jurl=trim($_GET["jurl"]);
$raw = file_get_contents($jurl);
//Note, if trickyness like decode detected then display empty.
if(!preg_match("decode(", $raw)){
//Kill anoying popups.
$raw=str_replace("alert(","isNull(",$raw);
$raw=str_replace("window.open","isNull",$raw);
$raw=str_replace("prompt(","isNull(",$raw);
$raw=str_replace("Confirm: (","isNull(",$raw);
//Echo the website html to the iframe.
echo $raw;
}
?>

Quite an old ask, but I thought I'd offer a newer solution since this is the top result in google.
If you want to block an iframe from opening windows, you can use the new HTML5 "sandbox" attribute on your iframe.
https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe
This should keep it from doing anything (except running javascript which may be required for the page to function correctly):
<iframe sandbox="allow-scripts" src="your/url/here"></iframe>

I don't think this is possible.
first (and most importantly), if the iframe is in a different domain, you can't change its DOM - such as the onunload handlers. If this is the case, the other two issues are moot.
second, even if you could, you'd have to remove the listener in some way. If the listener is loaded via window.onunload, that would be simple; otherwise, not so much.
third, in the long term this would lead to the same arms race as the frame-busting-busters
The only possibility I see is non-technical in nature: check with whoever runs that site inside the iframe if they could make a special page for you, one without such onunload popup. In most cases, either
a) some special arrangement can be made (although not always for free), or
b) removing the functionality would be a violation of the ToS, in which case you'd have to look for someone else providing similar functionality, without the pop-ups (and realistically, most services have more than a single provider)

Actually, this is possible. Well at least in many cases. Often, the code in the iframe will be running something like top.window.open(...) to open a pop-up. You can redefine the window.open method so it still exists, but doesn't open a window. E.g.:
`
window.alias_open = window.open;
window.open = function(url, name, specs, replace) {
// Do nothing, or do something smart...
}
`
If you still want some pop-ups to open, you can whitelist urls within the body of window.open, and call alias_open as needed.

Setting the sandbox attribute on the IFrame element should work.

I'm not sure if this would work but you could try double Iframing. Iframe the site in a free blogger account, then iframe the blogger account with a delay loading code. so the popup will occur before the page is loaded let me know if it works.

Use a modern browser - they all come with decent pop-up blocking capabilities