I want to load another site's page (e.g: www.a.com/b.html) on my site's page. TO do that I use an iframe to do that. But in that page (b.html), there is a button that I need to hide. Is there any way to hide that button with javascript or jquery.
Is there any other way to get the content of that page and edit some and display on my page.
$().contents should allow you to access the elements within an iFrame
$('iframe').contents().find('#btnId');
Related
I need to use a webpage as an Iframe, but the page has a button that expands a chat window. The problem is, how do I insert an Iframe without disableling the content that's behind it?
It's supposed to show just the button (from the other page) then, when it's clicked, the iframe should expand itself.the background is just for visual purposes
I want to add an iframe inside a pop up dialog. How can I add it inside this dialog popup using JavaScript.
Here is the dialog pop inside which I want to use an iframe.
Here is the Iframe tag that I want to show inside the popup. You can add any website in iframe. Thanks in advance for your help.
<iframe src="http://www.w3schools.com"></iframe>
You cannot display google.com inside an iFrame. Reason being that Google sends an "X-Frame-Options: SAMEORIGIN" response header. This option prevents the browser from displaying iFrames that are not hosted on the same domain as the parent page. This is a security feature to prevent click-jacking. Details at How to show google.com in an iframe?
EDIT after the 1st comment below:
I assume you want to load the iframe inside the dialog when "New Dialog" button is clicked. Can you try doing this:
last=$(<div/>").dialog(dialogOptions).dialogExtend(dialogExtendOptions).load("https://www.html5rocks.com/en/tutorials/cors/");
Updated fiddle : https://jsfiddle.net/rwk1Ljcy/1/
I have a iFrame which loads many different pages, the initial load is always fine as i hide the IFrame until content is loaded then only do i display the IFrame.
My problem is now i have some pages which need to postback to grab information out the database dependent on what a user has on that page.
When this happens i get a white page while content is loaded. I cant hide the page as this would look worse then having a white loading page, i just need it to sit still with no flash while its drop down box populates.
I'm up for any solution using JS JQ or C# and my project is in ASP.
How i call my page refresh:
window.location.reload(true);
I call the refresh from inside the iFrame (Name: IFrameDam)
I am able to hid my IFrame from with in its self if this sparks any idea's:
$('#IFrameDam', window.parent.document).hide();
You can use Ajax request instead iframe and update the contents inside iframe parent div with id #IFrameDam and set the timer to resend ajax request and update without white screen. This behavior is same for almost any browser whereas iframe loads a whole new page inside current page leaving a blank space when not loaded.
here's how you can achieve this using ajax and jquery.
Just put iframe src path after "request_page" and refresh time after "time" variables.
Follow this link: http://jsbin.com/EYIKAnAb/1/edit?js
I would like to improve loading performance for a page that has a button to trigger a popup initially hidden on the page (uses 'modal' component from twitter bootstrap). This popup body contains an iframe, which source is loaded on the page inital load adding about 30-40% more time to load, however. The iframe source is not needed to be loaded till the button is clicked which brings up the popup with the iframe. How can one avoid loading the iframe source on initial page load? ...only load the iframe source when the button is clicked? Can JS be used here? If so, then how or what method/library? Is there a better approach than make popup with iframe hidden in the page to improve loading time? Thank You
This is possible with JavaScript (no extra libraries required).
Simply use a function to set the src/display the frame when a link or button is clicked.
function loadIFrame(frameID, url) {
var frame = document.getElementById(frameID);
frame.setAttribute('src', url);
frame.style.display = 'block';
}
See the example here:
http://jsfiddle.net/ZNGmy/
Rather than having the pop-up as a hidden container that is made visible by the button, make the pop-up with the iframe content a separate html page that gets displayed by pressing the button. This way the content is not loaded until the button is pressed.
This link has an example of popping-up html pages.
http://allwebco-templates.com/support/S_add_pop.htm
I want to use jQuery Dialog to display popup through an iframe. However when using it, the overlay and dialog is only displayed inside the iframe not on the parent.
I have checked out this question but that solution will work if I have access to the code of parent page that contains my iframe but in my scenario I don't have access to the pages that will use my page as iframe. How can I display Dialog in parent page?