Skip to main content
A
Anonymous
May 21, 2019
Answered

Links keep opening in frame (when using _self)

  • May 21, 2019
  • 2 replies
  • 4441 views

The below code is a sample of how I’ve set up my link buttons in my HTML Canvas file.

I then publish as a OAM file. Then I insert the OAM into Dreamweaver.

Then publish out of Dreamweaver and/or Put up onto the actual server.

Originally the _blank were _self (also tried _parent and _top), all of them (_self, _parent and _top) kept erroneously opening in a frame (image below)?

Why is it behaving like this, when my old SWF site only used _self it worked perfectly (when Flash is enabled of coarse).

_blank is used now only because the others won’t work, but I would like it to behave like it used to, where it would stay on the current window/tab?

What am I doing wrong?

The files I’m using are available for download below.

Thanks.

_self, _parent and _top causes the urls to load in a separate frame?

Sample of my current link setups (originally it was _self😞

//  5.2 PRINT submenu button link
this.nPrint_btn.addEventListener("click", fl_ClickToGoToWebPage0502);
function fl_ClickToGoToWebPage0502() {
window.open("http://solarinkgraphics.com/#printAnchor", "_blank");
};
//  5.3 WEB submenu button link
this.nWeb_btn.addEventListener("click", fl_ClickToGoToWebPage0503);
function fl_ClickToGoToWebPage0503() {
window.open("http://solarinkgraphics.com/#webAnchor", "_blank");
};
//  5.4 ILLUSTRATIONS submenu button link
this.nIllus_btn.addEventListener("click", fl_ClickToGoToWebPage0504);
function fl_ClickToGoToWebPage0504() {
window.open("http://solarinkgraphics.com/#illustrationsAnchor", "_blank");
};
//  6. RATES button link
this.nRates_btn.addEventListener("click", fl_ClickToGoToWebPage06);
function fl_ClickToGoToWebPage06() {
window.open("http://solarinkgraphics.com/rates.html", "_blank");
};

Animate HTML5 Canvas File:

http://solarinkgraphics.com/files/Vrt_FoldOutNavbar_HTML5%20Canvas.fla

Dreamweaver file:

http://solarinkgraphics.com/files/about.html

This topic has been closed for replies.
Correct answer kdmemory

One thing I’m going to try later on, is inserting the HTML from Adobe Animate’s published HTML file, which is entirely separate from Dreamweaver’s HTML file. Involving placing certain Animate derived HTML attributes/properties/values into the starting <body … > tag, as well as the actual Animate coding into the <body> … </body> itself. Along with dropping Animate’s generated JS file into the directory the dreamweaver HTML files are held in. I went that route previously, before learning about about OAM. There were some positioning issues, but I may be able to sort that out easily now, after experience with the OAM insertion in Dreamweaver.

The whole point being that, I believe the above approach doesn’t contain the <object> tag within Animate‘s derived HTML file.

Up until this point I’ve been inserting an OAM file from Animate into Dreamweaver. Which I thought would be more straightforward and lead to optimum results, but it turns out it may have some drawbacks when it comes to URL links, apparently caused by this <object> tag.

More to come later.

Thanks for your continued help with this. I really appreciate it.


Hi Derek

try this method:

this.nContact_btn.addEventListener("click", fl_ClickToGoToWebPage07);  
    
function fl_ClickToGoToWebPage07() {  
    window.parent.document.location = "http://solarinkgraphics.com/contact.html";  
}; 

The essential part is

window.parent.document.location = "NEW URL";

<object> data is embedded in a frame, we know that now. A frame is a window with an autonomous document.

Ergo: We reference this starting with window.

The parent of a window is the next higher window object in the Document Object Model (DOM), in your case that's the main brower window.

Ergo: We reference that one with window.parent.

The document is the current HTML document in our main browser window.

Ergo: We target that with window.parent.document.

And lastly location is the URL of that document we would like to swap.

Ergo: window.parent.document.location = "NEW URL";

I tested this and it works. Hope it does it for you as well.

Klaus

2 replies

O
Owl Bear
Participant
June 16, 2021

 

Here's a Solution:
One of the best ways to break out of the frames is  as follows:
1. You have to add the code...

<base target="_parent">
....to the HEAD of the page where you are getting the links stuck in frames. (If you don't know how to add content to the HEAD of the particular page where your movie is embedded in WordPress website, visit https://mrvirk.com/how-to-add-code-to-head-tag-in-wordpress.html)


2. Next set the code in your adobe animate project to match the example below

this.MYBUTTON_A.addEventListener("click", fl_ClickToGoToWebPage);


function fl_ClickToGoToWebPage() {
window.open("WWW.MYWEBSITE.COM/SOME  DIRECTORY/YOUR LINK/","_parent");
}

That's it.
Here's a link for a further explanation if you are interested:
https://stackoverflow.com/questions/1037839/how-to-force-link-from-iframe-to-be-opened-in-the-parent-window

kdmemory
kdmemory
Inspiring
May 21, 2019

Hi Derek

According to the source code of your 'Dreamweaver file' your Animate Canvas file isn't located in a frame (like in iframe), it is put into an <object> element by Dreamweaver.

<div id="aboutHead">
  <object id="EdgeID2" type="text/html" width="602" height="260" data-dw-widget="Edge" data="animation_assets/about_HTML5 Canvas/Assets/about_HTML5 Canvas.html">
  </object>
</div>

An <iframe> is its own window object and target attributes like _self, _parent or _top would make sense. An <object> element on the other hand is no window object and, anyway, I don't get your statement:

     Originally the _blank were _self (also tried _parent and _top), all of them (_self, _parent and _top) kept erroneously opening in a frame (image below)?

What are you talking about? In your above HTML document there's nothing being either a Frameset/frame (forget this immediately it's depricated in HTML5 since years) or iframe. I guess that all ill effects which look like 'opening in a frame' are actually caused by CSS positioning problems.

However, I had to add forward slashes to your data links in order to see your objects respectively Animate Canvas creations. Like in

data="/animation_assets/about_HTML5 Canvas/Assets/about_HTML5 Canvas.html"

And if you want to open other HTML documents triggered by pressing your Animate/Canvas buttons use instead of window.open

function fl_ClickToGoToWebPage06() {  
    window.href.location = "http://solarinkgraphics.com/rates.html";
}; 

if you really want to open it in the same and one and only window you have.

Klaus

A
Anonymous
May 22, 2019

Chrome is calling it a frame btw (image 1 below).

I was able to left click (contextual menu) this after left clicking initially and selecting Hide This Plugin (image 2 below).

You’re right, there’s no coding in my HTML or Animate HTML5 pointing or mentioning frames, but these links are turning up in frames for some reason.

1.

2.

kdmemory
kdmemory
Inspiring
May 23, 2019

Still no success. Even with your last suggested snippet.

The main attempts made are listed below.

In addition to attempting shortening the targeting:

window.parent.location

window.parent.

Everything failed. Nothing even navigated anywhere. The buttons just rolled over but clicking on them does nothing.

You mentioned this working for you, was it via an OAM file brought into Dreamweaver, or were the conditions different somehow?

I even attempted searching for getting rid of iframes/frames via javascript. Attempted a few within Animate project and within the Dreamweaver HTML page and it all failed or removed everything entirely, except the background.

But yeah, I’m at my wits end, which wasn’t lengthy to begin with. Ha. Smh.

This code failed to even navigate.

//  4. RESUME button link
this.nResume_btn.addEventListener("click", fl_ClickToGoToWebPage04);
function fl_ClickToGoToWebPage04() {
window.parent.document.location = "http://solarinkgraphics.com/resume.html";
};

Previous snippet with “.href” added.

//  4. RESUME button link
this.nResume_btn.addEventListener("click", fl_ClickToGoToWebPage04);
function fl_ClickToGoToWebPage04() {
window.parent.document.location.href = "http://solarinkgraphics.com/resume.html";
};

Code placed in a failed attempt to remove iframe (with window.open(URL); method).

document.querySelectorAll('iframe').forEach(
  function(elem){
    elem.parentNode.removeChild(elem);
});

Hi

I've put my test project on CC for you to check out.

I didn't use an OAM and Dreamweaver. It's all hand-coded. I'm not a friend of Dreamweaver or any WYSIWYG kind of tool. And I'm not sure which mess Dreamweaver puts into your <object> elements that a relative straightforward method like

window.parent.document.location = "NEW URL";

doesnt work. It definitely does in my setup.

On index.html there are two Animate buttons, one in an <object>, the other one in an <iframe>. Both Animate buttons are the same file and in both the link into a fresh window works.

But if you test locally by double-clicking the index.html to open in Google Chrome, this doesn't work for me. The whole project needs to be running on a web server. In Firefox it works locally too.

Klaus

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices