Links and buttons do not work in AMP iframe component - iframe

I have an amp-iframe that I serve to a client, the links and buttons inside this amp-iframe have an unexepected behavior has they are not working at all. One is a button that runs a Javascript function, the other one is simply an <a href=""> anchor.
For the button I have this error :
Uncaught DOMException: Failed to set the 'href' property on 'Location': The current window does not have permission to navigate the target frame to my location
For the anchor I have :
Unsafe JavaScript attempt to initiate navigation for frame with origin origin from frame with URL amp-iframe origin. he frame attempting navigation is sandboxed, and is therefore disallowed from navigating its ancestors.
Here is a sample code of my amp-iframe integration :
<amp-iframe
width="200"
height="850"
sandbox="allow-scripts allow-same-origin allow-top-navigation"
layout="responsive"
frameborder="0"
src="https://api.mysite.fr/XXX.html"
>
<div placeholder>
Error
</div>
</amp-iframe>
Any ideas that can resolve this ?

Related

NextJs - Page shows before redirect

I am having some issues in next.js when clicking on a navigation buttons and redirecting to a new page.
I have navigation with links like this one below:
<button key={index}>
<a
href={url}
>
{text}
</a>
</button>
For example, route where element points is /about. When I click on a button, "about" page will flash for a second or less and after that redirect to that page will happen. I cannot figure why is that happening
Thanks in advance!
you should use the built-in component of nextjs to navigate on the client side see: next/link
<Link href="/about">about<Link>

xpath span not detected

Updated outer html and latest error. It seems the element was detected but failed to click onto it.
My script fail at below element, I have tried many way to re-construct xpath but the robot keep failing the DOM invalid.
original element:
<div class="ant-select SearchPrompter_advInput__3P9Jf ant-select-multiple ant-select-allow-clear ant-select-show-search">
<div class="ant-select-selector">
<div class="ant-select-selection-overflow">
<div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1;">
<div class="ant-select-selection-search" style="width: 3px;">
<input autocomplete="off" type="search" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_2_list" aria-autocomplete="list" aria-controls="rc_select_2_list" aria-activedescendant="rc_select_2_list_0" value="" id="rc_select_2" style="opacity: 0;" aria-expanded="false" readonly="" unselectable="on">
<span class="ant-select-selection-search-mirror" aria-hidden="true"> </span>
</div>
</div>
</div>
<span class="ant-select-selection-placeholder">Select Source(s)</span>
</div>
</div>
script:
*** Settings ***
Library Browser
Library OperatingSystem
Resource ../Resources/BrowserParameters.robot
Resource ../Resources/BrowserResources.robot
Resource ../Resources/BrowserCustomKeywords.robot
#Select Browser: chromium or firefox
Test Setup Test Setup Browser=chromium
Test Teardown Test Teardown
*** Test Cases ***
001
Click //span[contains(#class,'ant-select-selection-placeholder') and contains(text(),'Select Source(s)')]
Error
FAIL
Message: TimeoutError: locator.click: Timeout 10000ms exceeded.
=========================== logs ===========================
waiting for selector "//span[contains(#class,'ant-select-selection-placeholder') and contains(text(),'Select Source(s)')] >> nth=0"
selector resolved to hidden <span class="ant-select-selection-placeholder">Select Source(s)</span>
attempting click action
waiting for element to be visible, enabled and stable
element is not stable - waiting...
element is visible, enabled and stable
scrolling into view if needed
done scrolling
checking that element receives pointer events at (1080.4,304.7)
<div class="ant-select-selection-overflow">…</div> intercepts pointer events
retrying click action, attempt #1
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
checking that element receives pointer events at (1080.4,304.7)
[ Message content over the limit has been removed. ]
element is visible, enabled and stable
scrolling into view if needed
done scrolling
checking that element receives pointer events at (1080.4,304.7)
<div class="ant-select-selection-overflow">…</div> intercepts pointer events
If I use this, then I can see the field being accessed and list is displayed. however in the form has 2 fields using this same xpath. So robot accessed into 1st field, but I wanted it goes to next field.
Click //div[#class="ant-select SearchPrompter_advInput__3P9Jf ant-select-multiple ant-select-allow-clear ant-select-show-search"]
Please correct your Xpath from
//span[#class=""ant-select-selection-placeholder">Select Source(s)"]
to
//span[#class="ant-select-selection-placeholder"]
Or
//span[#class="ant-select-selection-placeholder" and (text()="Select Source(s)")]
This error message...
Error: locator.click: DOMException: Failed to execute 'evaluate' on 'Document': The string './/span[#class=""ant-select-selection-placeholder">Select Source(s)"]' is not a valid XPath expression.
...implies that the XPath you have used isn't a valid xpath expression.
You have to make two minor adjustments as follows:
The value of the class attribute must be within single double quotes i.e. "value"
Select Source(s) is the innerText within, so you have to mention it as text.
Solution
You can use either of the following Locator Strategies:
xpath 1:
//span[#class='ant-select-selection-placeholder' and starts-with(., 'Select Source')]
xpath 2:
//span[#class='ant-select-selection-placeholder' and contains(., 'Select Source')]
Please use below xpath
//span[contains(#class,'ant-select-selection-placeholder') and contains(text(),'Select Source(s)')]
or
//span[contains(#class,'ant-select-selection-placeholder') and starts-with(text(),'Select Source')]
Please check in the dev tools (Google chrome) if we have unique entry in HTML DOM or not.
Steps to check:
Press F12 in Chrome -> go to element section -> do a CTRL + F -> then paste the xpath and see, if your desired element is getting highlighted with 1/1 matching node.
If we have 1/1 matching node, Please make sure that :
This div is not under an iframe.
This div is not under a shadow-root.
You should not be on new tab/windows launched by selenium.

How to make a button link within the iFrame load to a parent window?

Website Link: http://www.londonuw.com/category.aspx?id=MISC15
Under other products, click workers comp. You can see the page loads within the frame.
Here is the iframe code:
<iframe src="mywebsitelink" width="1000px" height="1550px" frameborder="0" scrolling="no"></iframe>
What do I add to make this load in the parent window instead of the iFrame?
In the i frame link add <a href="" target=_parent>.
The would open the page in parent and not in the iframe.
Found out what needed to be done. I inspected stackoverflow's post of iFrames.
http://www.w3schools.com/html/html_iframe.asp
When clicking on links in the center page, it will open a new window. But when i clicked on the dark bold menu items on the left it loaded in the parent window without needing to open a new page. Exactly what I needed!
Inspecting that element showed this code:
(a target="_top" href="default.asp" class="menu_default">HTML HOME
So all I did was replace "default.asp" with my website link and HTML HOME with my desired button name and magic!
**base target="_parent" or target="_parent" did not work for some reason
Thank you Vipul Behl for leading me in the right direction!

emberjs preserve iframe between route changes

What are the possible ways in which I can preserve an iframe embedded in a view in between my route changes?
As the route changes from Route A-> Route B, Ember destroys the View for A. My View for A has an embedded iframe which I would love to preserve and not reload when Route A is revisited.
So far, I tried moving my iframe to a parent view that is not destroyed when exiting Route A but browsers reload iframes when you move them around in the DOM, so its a moot exercise.
Indeed nesting is the right choice for you problem of iframe.
Here is a detailled example with a counter to see when the iframe is reloaded.
|-home
|-about
|-elsewhere
This important part of the fiddle is :
<div class="border-row">
This is home
<iframe src="http://emberjs.com/" width="100%" height="150px" onload="App.HomeController.countLoadings()"></iframe>
count : {{App.HomeController.loadcount}}<br/>
isDestroying : {{isDestroying}}<br/>
isDestroyed : {{isDestroyed}}
</div>
{{outlet}}
You can see that the iframe only reloads when you actually move to another part of the hierarchy route. If you navigate between home and about, the iframe stays the same.

Show urls o/p in iframe

i am using feeds module for import news items.By using views,i display the news title,description and item url.In this,when user hit the item urls means its loads that particular site inside my site.I try to use Iframe by way of "output rewrite option" in views.But that page load fully instead of load inside my site.I use following code for that.
<iframe src="[url]" width="100%" height="300">
<p>[url]</p>
</iframe>
Any one please guide me resolve this.
thanks
This can be achieved using the target attribute on an a tag. For example when the user hit's the item URL it would load in the target window which in this case is the frame. Take for example the code below.
test
<iframe name="target_frame" src="http://www.google.com" frameborder="0" width="300" height="300"></iframe>
The frame initially loads google.com but once the link is clicked the target attribute on the a directs the click to the frame which has the same name attribute, in this case target_frame
You can read more about the target attribute here http://www.w3schools.com/tags/att_a_target.asp

Resources