I have a page within my website which has about 60 iframe elements inside it. These iframes are contained within w3-modals divs but are all being loaded as soon as the page loads, causing the page to load very slowly. Is it possible when a user clicks on the button to load the w3-modal that they iframe can be loaded then to help page load time.
Any help would be much appreciated with this! But if possible please keep it simple as I am new to coding.
Thanks very much!
Here is the code Im using:
Button to load modal
<button onclick="document.getElementById('id03').style.display='block'" class="w3-btn w3-light-blue">Instruction</button>
Modal code
<div id="id03" class="w3-modal">
<iframe src="http://" frameborder="0" height="700px" style="width: 800px">
I think your are taking this to the incorrect way. Loading 60 different pages is crazy, and for sure your computer and browser are suffering with this.
I think a better approach would be (as you said) loading your iframes as they are requested. I'm assuming that all your iframes are hidden (and you are using this modal system), so we could do something like this:
<button class="w3-btn w3-light-blue" data-open-modal="id03">Instruction</button>
<div id="id03" class="w3-modal" data-url="your-iframe-url"></div>
You first defined a button with the data-attribute data-open-modal which indicate that this button will open a modal. Next, you have your modal div with data-url defining the URL to use in the iframe. So, this is the JavaScript to do the trick (with jQuery, sorry no time of vanilla):
// We find all the buttons 'data-open-modal'
$('[data-open-modal]').click(function (e) {
// We get the ID of the modal to open
var modalId = $(this).data('open-modal');
// We set a modal reference (shortcut)
var $modal = $(modalId);
// We get the iframe URL from the modal data-url
var iframeURL = $modal.data('url');
// We show the modal
$modal.display(); // display: block;
// We create the iframe inside using the URL
$modal.append('<iframe src="' + iframeURL + '" frameborder="0" height="700px" style="width: 800px">');
// We bind a click event when the user clicks on the "X" to close the modal and whe delete the iframe
$modal.find('.w3-closebtn').on('click', function (e) {
$modal.find('iframe').remove(); // Delete the iframe
});
});
I haven't tested this code, but it should work!
var your_source = $('#source').val();
$("#button").click(function () {
$("iframe").attr("src", your_source);
});
Related
So, I've tried to googling for it, but seems like that it is not my strongest part.
Example: I have a div with embed a video inside, but to show that video I have to click first on div which opens and shows the video. The problem is that it loads on pageload. It makes browser lags while there is more than 4-5 of those div with videos. How can I make it to not load withing pageload, but only when a div is clicked and unload its content when it is clicked again.
$('.cont').hide();
$('h4').click(function () {
var $answer = $(this).next('.cont');
if ($answer.is(':hidden')) {
$answer.show();
} else {
$answer.hide();
}
});
This is what I have, but it is not as I described it
<div class="container">
<iframe new-src="http://linktoadditionalcode">Update your Browser!</iframe>
Load
Unload
</div>
<script>
function load(elem){
frame=elem.parentElement.getElementsByTagName("iframe")[0];
frame.src=frame.new-src;
}
function unload(elem){
frame=elem.parentElement.getElementsByTagName("iframe")[0];
frame.src="";
}
</script>
this loads/unloads the iframe. While your code just hides it, this completely loads/nloads it.
I have made the following site:
www.ppp.one
Whenever you open an image, a popup is loaded.
This popup can be closed using the X on the top-right. However, if you click on one of the thumbnails in the popup (reloading the frame) the X button can no longer close it.
The JavaScript I use:
function hide(){
if(currentIframe){
currentIframe.hide();
currentIframe = null;
}
popupBG.remove();
popup.remove();
}
And the html:
<a class="small align-top" onclick="frameWarp.hide();">✖</a>
Any ideas on what is causing the issue?
When you open the popup you call a function setUpAPI which inserts the frameWrap object into the global scope of the iframe.
When a thumbnail is clicked the frame is reloaded and the frameWrap instance is no longer available.
You could try listening for load events on the iframe instead of ready events:
iframe.ready(function(){
frameCacheDiv.append(iframe);
});
iframe.load(function(){
setUpAPI(iframe, settings);
settings.onShow();
});
It looks like when the iframe's URL changes the frameWarp variable becomes undefined. One idea to try would be to listen to the load event of the iframe and make your changes there: (you'd have to give it the ID of "iframeId")
$('#iframeId').load(function(){
console.log('URL changed');
// code to attach hide event here
});
Another idea would be to change your setup to use the postMessage API for the communication between the parent and iframe. You can read a tutorial of how to do that here:
http://robertnyman.com/html5/postMessage/postMessage.html
Edit: Actually, this blog post is a better example: http://davidwalsh.name/window-iframe
On my WordPress website, I have a menu down one side and a embedded prezzie within an IFrame next to the menu.
I want to use some form of click event to change the content of the IFrame to another prezie without the page being refreshed, to give it a seamless change but I am stuck on how to write the code.
The menu buttons are actually pictures trapped in a map, to give the illusion they are actually functional buttons.
Can anyone help me with this please?
Thanks in advance.
Add a JavaScript function to swap the Url of the Prezi iframe.
function changePrezi (preziKey) {
var url = "http://prezi.com/embed/" + preziKey + "/";
document.getElementById('prezi').src = url;
}
Then add onClick handlers to your menu links/buttons to call the changePrezi function, passing in the proper Prezi key.
<button onClick="changePrezi('ltv92t40up8k')">Prezi 1</button>
<button onClick="changePrezi('rqqnh_taqx1l')">Prezi 2</button>
<iframe id="prezi" frameborder="0" width="550" height="400"></iframe>
Here is a Plunker Demo.
I am using JQuery Mobile to load some content from a different page into an iframe in a popup and displaying that iframe content within that popup on my initial page.
My popup link is as follows:
<a href="#popupBasic" data-rel="popup" data-transition="pop" data-position-to="window">
My popup is defined as follows:
<div data-role="popup" id="popupBasic" data-overlay-theme="a" data-dismissible="false">
Close
</div>
As you can see it has a close button.
I open my popup when a list item in a listview is tapped as follows:
$('#myList').delegate('li', 'tap', function () {
var index = $(this).index();
$("#popupBasic #memberFrame").remove();
$("#popupBasic").append( '<iframe src="/myPage?id=' + index + '" height="400px;" width="100%;" id="memberFrame"></iframe>' );
});
As you can see this loads the page with a specific id based on the index, the popup opens and this content gets loaded in the iframe within the popup.
On my iframe content there is a button and a count, when the button is pressed the page refreshes and the count should be increased. This is done by the server. However while I can see the count is getting increased and the page looks it gets refreshed it appears the content within the iframe is getting cached or something as when the page refreshes the old count is there.
Two things to add to this:
1: If I then manually refresh the iFrame by right clicking on it and selecting the refresh frame option it works OK
2:The popup has a close button on it and when I click this the first time it doesn't close the popup, instead it looks like it refreshes the iframe content and this time the count is correct. Then pressing the close a second time actually closes the popup
The experience in #2 I find very odd and I was wondering if anyone could help point out why this might be occurring?
I am using an Iframe with fancybox2, to open up a page which has a form which updates a database. What i am looking for is that when the fancybox is closed the parent page, which is a table of database results, automatically refreshes it's self.
My link to the iframe page is here:
echo "<a class='fancybox fancybox.iframe' href=\"add.php?ip_address={$ip_address}&id={$id}&userna={$username1}\" class=' btn btn-small' data-original-title='Add'>Add</a>";
I also have this code which i found in a different post, when i include this in the parent page, and click on the link, the fancy box starts but then immediatley closes and refreshes the page.
$("fancybox").fancybox({
afterClose : function() {
location.reload();
return;
}
});
I have tried several re-writes of this code but it either describes as above or just doesn't work. Any suggestions would be much appreciated.
try calling window.parent.location.reload();