I have a complete webpage (html/css/js) wrapped inside iframe within my webpage, this was called by javascript, of course this is from using 3rd party services. is there any way to style the elements inside the html within the iframe? since I dont have control over the webpage it calls, so I cant style them directly from my own webpage.
No. Not possible. You cannot edit html inside an iframe since it is controlled by other domain.
Related
I use an Iframe with an external API, which I don't control. My goal is to add Javascript code in my Website, to change the style of a few elements in the Iframe. First I considered using
document.getElementById(iframeId).contentWindow.document.getElementById(elementId);
but I soon recognized that it will not be successful because I am getting security issues. I tested a bit and found out when I inspect the element in the Iframe, which I want to change, I am able to get the element simply by using:
document.getElementById(elementId);
I don't understand. Why does this technique only work when I inspect the correct element first? And is there any way I can use this trick for my normal JS backend?
I want to obtain this iframe that it's inside a shadow-root (closed):
image of shadow root
I have tried already multiple things like document.querySelector("iframe[style*='display:block']").innerHTML or document.querySelector("iframe[style*='display:block']") but none of this works.
How can I obtain this iframe?
I have an application where I have loaded a few custom elements (Via js file ) and added iframe and loaded a page inside the iframe.
Can we copy all custom elements inside the frame window without adding custom elements js file reference?
The customElementsRegistry is a window Global object
An IFrame is another window
So they do not share Registry/Custom Elements
There is an ongoing discussion on Scoped Registries
https://github.com/WICG/webcomponents/issues/716
But that is more about multiple registries within one window/document
Its is unlikely your IFrame scenario will be tackled;
So just add your elements.js to the HTML file loaded in the IFrame
I want click by some element in VKontakte web application from JS, but it not possible.
For example I go to this application http://vk.com/app2797985. I want click by element with id: likeBlock_button_like.
Standart JS code for clicking by element:
javascript:document.getElementById('likeBlock_button_like').click();
but this code dont work with this application. How to solve this problem?
The reason you cannot access the element is because it is inside an iframe. Since the iframe is from different domain, you cannot access dom elements through javascript due to Same origin policy
I wanted it to work in an Iframe but if I define the js. in the parent document it does not recognize the elements that should be "introduced" inside the iframe. If I use it inside the iframe the effect is not what I expect (the overlay covers only the iframe).
[Intro.js being used inside an iframe.png] https://dl.dropboxusercontent.com/u/6421243/Intro.js%20being%20used%20inside%20an%20iframe.png
Is there something I can do with the plugin code so that it searches the elements inside an iframe but still shows the overlay over the parent?
UPDATE: I would like the black overlay over the WHOLE page (so the border of the iframe would also be covered by it).
Run intro.js in both iFrame and the parent.
In the parent, remove the toolTip and just highlight the iframe
In the iframe, run whatever toolTips you need
To communication between the two, have a look at this: How to communicate between iframe and the parent site?
First of all you should know that if you define your JavaScript codes outside of iframe, it's no longer available in the inner iframe because you don't have access to them.
So, you should put your codes inside the iframe only.
Update:
So I think you put the container element wrongly so the IntroJs define the overlay wrong wrongly too. Update and change your element container and then you will don't have any problem with that.